选中的标签不会显示其中的内容

时间：2017-08-16 23:23:05

标签： jquery html twitter-bootstrap

我左上方有一个菜单栏用于选择列表，导航显示从菜单栏中选择的内容。菜单栏中的所选项目必须在菜单栏和导航栏上处于活动状态才能正常工作。唯一的问题是不显示所选项目内的内容。我使用jquery和bootstrap来实现这一目标。

我得到了什么 The results I get

我想要实现的目标 The layout of what I want to achieve.

我的代码也可用here

＆＃13;
＆＃13; 
  $("#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");
  });
＆＃13; 
    <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%">
	<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 href="#learnBootstrap" data-toggle="tab">Learn Bootstrap</a></li>
    			<li><a href="#learnHTML" data-toggle="tab">Learn HTML</a></li
    			<li><a href="#learnCSS" data-toggle="tab">Learn CSS</a></li>
    			<li><a href="#learnJavaScript" data-toggle="tab">Learn JavaScript</a></li>
    			<li><a href="#learnjQuery" data-toggle="tab">Learn jQuery</a></li>							
    		</ul>
  		</li>				
  	</ul>
 </div>
 <div class="content">
   <div class="panel-body">
      <div><h2>List</h2></div>
   <ul class="nav nav-tabs">							
   	<li id="learnBootstrap"><a href="#" data-toggle="tab">Learn Bootstrap</a>      </li>
	<li id="learnHTML"><a href="#" data-toggle="tab">Learn HTML</a></li>
	<li id="learnCSS"><a href="#" data-toggle="tab">Learn CSS</a></li>
	<li id="learnJavaScript"><a href="#" data-toggle="tab">Learn JavaScript</a></li>
	<li id="learnjQuery"><a href="#" data-toggle="tab">Learn jQuery</a></li>							
</ul>
    <div class="tab-content">								
    	<div class="tab-pane home" id="learnBootstrap">
       		<h3>Learn Bootstrap goes here</h3>
    	</div>
    	<div class="tab-pane" id="learnHTML">
    		<h3>Learn HTML content goes here</h3>
    	</div>
    	<div class="tab-pane" id="learnCSS">
    		<h3>Learn CSS content goes here</h3>
    	</div>			
    	<div class="tab-pane" id="learnJavaScript">
        	<h3>Learn JavaScript content goes here</h3>
    	</div>
    	<div class="tab-pane" id="learnjQuery">
    		<h3>Learn jQuery content goes here</h3>
    	</div>
    		
    </div>
    </div>
  </div>		
</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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

//----- 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

相关问题
最新问题