选择标签不会显示它内部的情况
问题描述:
我有一个菜单栏左上方的选择列表,以及导航显示从菜单栏中选择的内容。从菜单栏中选择的项目必须在菜单栏和导航栏上工作正常。唯一的问题是不显示选定项目内的内容。我使用jquery和bootstrap来实现这一点。选择标签不会显示它内部的情况
我的代码也可以什么here
$("#learnBootstrap").click(function(){
debugger;
$('.active').removeClass('active');
$(this).addClass('active');
console.log("Learn Bootstrap Active");
});
$("#learnHTML").click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
console.log("Learn HTML Active");
});
$("#learnCSS").click(function(){
$('.active').removeClass('active');
$(this).addClass('active');
console.log("Learn CSS Active");
});
$("#learnJavaScript").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
console.log("Learn JavaScript Active");
});
$("#learnjQuery").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
console.log("Learn jQuery Active");
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div id="navbar" class="navbar-collapse collapse" style="margin-left: -2%">
\t <ul class="nav navbar-nav navbar-left"> \t
\t \t <li class="dropdown"><a href="#" class="dropdown-toggle"
\t \t data-toggle="dropdown" role="button" aria-haspopup="true"
\t \t aria-expanded="false">Todo List<span class="caret"></span></a>
\t \t <ul class="dropdown-menu"> \t \t \t \t \t \t
\t \t \t <li><a href="#learnBootstrap" data-toggle="tab">Learn Bootstrap</a></li>
\t \t \t <li><a href="#learnHTML" data-toggle="tab">Learn HTML</a></li
\t \t \t <li><a href="#learnCSS" data-toggle="tab">Learn CSS</a></li>
\t \t \t <li><a href="#learnJavaScript" data-toggle="tab">Learn JavaScript</a></li>
\t \t \t <li><a href="#learnjQuery" data-toggle="tab">Learn jQuery</a></li> \t \t \t \t \t \t \t
\t \t </ul>
\t \t </li> \t \t \t \t
\t </ul>
</div>
<div class="content">
<div class="panel-body">
<div><h2>List</h2></div>
<ul class="nav nav-tabs"> \t \t \t \t \t \t \t
\t <li id="learnBootstrap"><a href="#" data-toggle="tab">Learn Bootstrap</a> </li>
\t <li id="learnHTML"><a href="#" data-toggle="tab">Learn HTML</a></li>
\t <li id="learnCSS"><a href="#" data-toggle="tab">Learn CSS</a></li>
\t <li id="learnJavaScript"><a href="#" data-toggle="tab">Learn JavaScript</a></li>
\t <li id="learnjQuery"><a href="#" data-toggle="tab">Learn jQuery</a></li> \t \t \t \t \t \t \t
</ul>
<div class="tab-content"> \t \t \t \t \t \t \t \t
\t <div class="tab-pane home" id="learnBootstrap">
\t \t <h3>Learn Bootstrap goes here</h3>
\t </div>
\t <div class="tab-pane" id="learnHTML">
\t \t <h3>Learn HTML content goes here</h3>
\t </div>
\t <div class="tab-pane" id="learnCSS">
\t \t <h3>Learn CSS content goes here</h3>
\t </div> \t \t \t
\t <div class="tab-pane" id="learnJavaScript">
\t <h3>Learn JavaScript content goes here</h3>
\t </div>
\t <div class="tab-pane" id="learnjQuery">
\t \t <h3>Learn jQuery content goes here</h3>
\t </div>
\t \t
</div>
</div>
</div> \t \t
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
答
//----- Bootstrap Portion
$("#learnBootstraplink").click(function(){
$('.nav-tabs li').removeClass('active');
$('.bootstrap').addClass('active');
$('.tab-pane').removeClass('in active');
$('.tab-content div#learnBootstrap').addClass('in active');
console.log("Learn Bootstrap Active");
});
//------ HTML Portion
$("#learnHTMLlink").click(function(){
$('.nav-tabs li').removeClass('active');
$('.html').addClass('active');
$('.tab-pane').removeClass('in active');
$('.tab-content div#learnHTML').addClass('in active');
console.log("Learn HTML Active");
});
//------ CSS Portion
$("#learnCSSlink").click(function(){
$('.nav-tabs li').removeClass('active');
$('.css').addClass('active');
$('.tab-pane').removeClass('in active');
$('.tab-content div#learnCSS').addClass('in active');
console.log("Learn css Active");
});
//------- JS Portion
$("#learnJavaScriptlink").click(function(){
$('.nav-tabs li').removeClass('active');
$('.js').addClass('active');
$('.tab-pane').removeClass('in active');
$('.tab-content div#learnJavascript').addClass('in active');
console.log("Learn js Active");
});
//------- JQUERY Portion
$("#learnjQuerylink").click(function(){
$('.nav-tabs li').removeClass('active');
$('.jquery').addClass('active');
$('.tab-pane').removeClass('in active');
$('.tab-content div#learnJQuery').addClass('in active');
console.log("Learn jquery Active");
});
您必须添加属性ID在待办事项列表中的项目具有点击功能,并添加导航选项卡列表中的列表项类鉴定。
<ul class="nav navbar-nav navbar-left">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Todo List<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="learnBootstraplink" href="#learnBootstrap" data-toggle="tab">Learn Bootstrap</a></li>
<li><a id="learnHTMLlink" href="#learnHTML" data-toggle="tab">Learn HTML</a></li>
<li><a id="learnCSSlink" href="#learnCSS" data-toggle="tab">Learn CSS</a></li>
<li><a id="learnJavaScriptlink" href="#learnJavascript" data-toggle="tab">Learn JavaScript</a></li>
<li><a id="learnjQuerylink" href="#learnJQuery" data-toggle="tab">Learn jQuery</a></li>
</ul>
</li>
</ul>
<ul class="nav nav-tabs">
<li class="bootstrap active"><a data-toggle="tab" href="#learnBootstrap">Bootstrap</a></li>
<li class="html"><a data-toggle="tab" href="#learnHTML">HTML</a></li>
<li class="css"><a data-toggle="tab" href="#learnCSS">CSS</a></li>
<li class="js"><a data-toggle="tab" href="#learnJavascript">JS</a></li>
<li class="jquery"><a data-toggle="tab" href="#learnJQuery">Jquery</a></li>
</ul>
<div class="tab-content">
<div id="learnBootstrap" class="tab-pane fade in active">
<h3>Bootstrap</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="learnHTML" class="tab-pane fade">
<h3>HTMl</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="learnCSS" class="tab-pane fade">
<h3>CSS</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="learnJavascript" class="tab-pane fade">
<h3>JS</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div id="learnJQuery" class="tab-pane fade">
<h3>Jquery</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
这里是工作示例JS Fiddle
@Sikandar_li我知道你做了效果很好的部分。您是否看到左上角的**小菜单栏**。导航上方。 –
谢谢@Sikandar_ali它做到了。 –
@JayStar您好! –