選択したタブは内部に表示されません

リストを選択するための左上にメニューバーがあり、メニューバーから選択したものを表示するナビゲーションがあります。メニューバーから選択した項目は、正常に動作しているメニューバーとナビゲーションバーでアクティブになっている必要があります。唯一の問題は、選択した項目の内容が表示されないことです。私はこれを達成するためにjqueryとブートストラップを使用しています。選択したタブは内部に表示されません

私は何を得る、私は私のコードも入手可能です

を達成したい何

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>

出典

2017-08-16 Jay Star

クリック機能を持つためには、ToDoリスト項目に属性IDを追加し、識別するためにnav-tabリストのリスト項目にクラスを追加する必要があります。私はあなたがうまく機能しなかった部分を知っている@Sikandar_liここ

<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

出典

2017-08-17 07:34:51

です。あなたは、左上隅に**小さなメニューバー**を見ましたか？ナビゲーションの上に。 –

ありがとう@Sikandar_aliそれはトリックをしました。 –

@JayStarあなたはようこそ –

選択したタブは内部に表示されません

答えて

関連する問題