ブートストラップレスポンスタブをドロップダウンし、私のコードには何が欠けていますか？

Question

私はブートストラップタブを小さな画面のドロップダウンメニューに変換しようとしています。私は私のドロップダウンのためにする2つのものがあります：

• 最初「を選択してください」とリスト項目が選択されると、それは同じよう
• ドロップダウンまだボタンに機能を示すされているものになりますと言うだろうボタンタブ、タブのコンテンツは、ドロップダウンメニューの下になり、私は私のjsファイルでこれを使用して動作するように最初のポイントを得ている

選択されている内容に応じて変化します：

$('#product-list .dropdown-menu a').click(function() { 
    $('#selected').text($(this).text()); 
}); 

私がこれに気づいたのは、リスト上の複数の項目をクリックしたときに、すべてがアクティブであるように強調表示されていることです。

2番目の点は、リストの各項目を一度選択することができますが、前に既に選択した項目を選択しようとすると、変更されませんそれらすべてが強調表示されていることと関係しています）。以下のコードは、私が使用したものです：

<div class="dropdown col-sm-12"> 
    <button id="dLabel" role="button" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false" href="#"> 
    <span id="selected">Please select a product <span class="caret"></span></span> 
    </button> 
    <ul class="dropdown-menu" id="myTabs" aria-labelledby="dLabel"> 
     <li role="presentation" class="active"><a href="#aframe" role="tab" data-toggle="tab">A-frames</a></li> 
     <li role="presentation"><a href="#alum" role="tab" data-toggle="tab">Alum panel signs</a></li> 
    </ul> 
</div> 

<div class="tab-content col-sm-12"> 
    <div role="tabpanel" class="tab-pane active" id="aframe"> 
     <p>Contents of tab panel in here</p> 
    </div> 
    <div role="tabpanel" class="tab-pane active" id="alum"> 
     <p>Contents of tab panel in here</p> 
    </div> 
</div> 

は、通常のタブで、私が必要とするすべてはNAV-タブにタブコンテンツをリンクすることですが、私は明らかに、ここでいくつかのことを欠けています。誰か助けてくれますか？ 非常に感謝しています！

Answer 1

あなたがのアンカーに

データトグル=「タブ」&のhref =「ターゲットID」を追加することで達成できる可能NAVの丸薬として機能するように、ドロップダウントグルを必要とする私の理解あたりとしてドロップダウン見出しの内容変更のドロップダウントグル

は、同じ効果のために、私が作成したpen

jqueryのに以下のコードを参照してください

解決のため

$(".drop").click(function(){ 
$(this).parent().removeClass("active"); 
var content = $(this).text(); 
$(".dropdown-toggle").text(content+" "); 
$(".dropdown-toggle").append("<span class='caret'></span>") 
}) 

Answer 2

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script> 
 
<ul class="nav nav-tabs" id="myTabs" role="tablist"> 
 
    <li class="dropdown col-sm-12"> 
 
     <button id="dLabel" role="button" data-toggle="dropdown" class="dropdown-toggle"> 
 
     <span id="selected">Please select a product <span class="caret"></span></span> 
 
     </button> 
 
     <ul class="dropdown-menu" id="myTabs" aria-labelledby="dLabel"> 
 
      <li role="presentation" class=""><a href="#aframe" role="tab" data-toggle="tab">A-frames</a></li> 
 
      <li role="presentation"><a href="#alum" role="tab" data-toggle="tab">Alum panel signs</a></li> 
 
     </ul> 
 
    </li> 
 
</ul> 
 
<div class="tab-content col-sm-12"> 
 
    <div role="tabpanel" class="tab-pane fade" id="aframe"> 
 
     <p>Contents of tab panel in here</p> 
 
    </div> 
 
    <div role="tabpanel" class="tab-pane fade" id="alum"> 
 
     <p>Contents of tab panel in here Contents of tab panel in here </p> 
 
    </div> 
 
</div>

チェックスニペット多くのソリューションのための