選擇標籤不會顯示它內部的情況

Question

我有一個菜單欄左上方的選擇列表，以及導航顯示從菜單欄中選擇的內容。從菜單欄中選擇的項目必須在菜單欄和導航欄上工作正常。唯一的問題是不顯示選定項目內的內容。我使用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>

Answer 1

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