jquery - 选定的选项卡不会显示其中的内容

标签 jquery html twitter-bootstrap

我在左上角有一个用于选择列表的菜单栏，以及显示从菜单栏中选择的内容的导航。从菜单栏中选择的项目必须在菜单栏和导航栏上处于事件状态，并且工作正常。唯一的问题是所选项目内的内容未显示。我正在使用 jquery 和 bootstrap 来实现这一点。

我得到了什么 The results I get

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

我的代码也可用 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%">
	<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>

最佳答案 

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

关于jquery - 选定的选项卡不会显示其中的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45724386/

上一篇：jquery 文件上传不适用于 jquery 3.x

下一篇：jQuery 创建一个新元素

相关文章：

twitter-bootstrap - 使用干净的代码进行 Bootstrap 设计 UI/模型？

html - 无法在 Bootstrap 中进行验证

jQuery 并在按钮元素上使用 Enter 键代替/以及空格键

javascript - 将默认焦点设置在不是第一个的特定下拉选项上？

javascript - Bootstrap $ ('.multiselect' ).multiselect() CONFLICT

javascript - 将 JSON 字符串发送到 cherrypy

html - 加载相对于网站位置的背景图像

javascript - 使用 HTML5 localStorage 和 jQuery 添加到收藏夹/书签

javascript - 将变量从 dom 元素传递到 onclick

javascript - 在javascript中存储所有出现的特定字符的行号

©2024 IT工具网  联系我们