下拉菜單功能與數據切換（TB）的問題

Question

我發現這個網站很有用，每當我遇到麻煩，我的代碼工作不正常，但我一直沒能找到修復（或弄清楚我的代碼有什麼問題），所以我決定最後創建一個帳戶。

我不是程序員，我不知道Javascript，因此我使用HTML，CSS和TB（Twitter Bootstrap）來作弊，這樣當我選擇一個選項時，它可以顯示對象而無需重定向到一個新的HTML頁面。

問題是我得到的代碼正常使用導航選項卡，但我試圖使其下拉按鈕可以具有相同的功能，但也可以在一個額外的小設備（手機）。下拉菜單起作用，但出於某種原因，它會使先前選擇的選項突出顯示（嘗試選擇新選項時），並且無法在不重新加載頁面的情況下再次選擇該選項。我想知道有沒有人可以幫我解決這個問題？

在此先感謝！

我的代碼是：

<div class="btn-group"> 
<button class="btn btn-default btn-lg dropdown-toggle" type="button" 
data-toggle="dropdown"> Designs and Concepts <span class="caret"></span> 
</button> 


<ul class="dropdown-menu"id="myTab"> 
<li><a href="#test1" data-toggle="tab">Test1</a></li>  
<li><a href="#test2" data-toggle="tab">Test2</a></li> 
<li><a href="#test3" data-toggle="tab">Test3</a></li> 
</ul> </div> 

<div class="tab-content"> <div class="tab-pane fade in active"></div> 
<div class="tab-pane fade" id="test1"> 
<img class="img-responsive"src="#"></img> 
<p>This is the first test section/p></div> 

<div class="tab-pane fade" id="test2"> 
<img class="img-responsive"src="#" style="width:250px;"></img> 
<p>This is the second test section.</p></div> 

<div class="tab-pane fade" id="test3"> 
<img src="#"></img> 
<p>This is the third test section</p> 
</div></div> </div>  

Answer 1

您需要嵌套的無序列表中的另一無序列表。

1）刪除您<div class="btn-group">並插入<ul id="myTab" class="nav">

2）在該行從<ul class="dropdown-menu"id="myTab">

4）關閉</li>和</ul>

5）插入<li class="dropdown active">

3）刪除id="myTab"對於您的<div class="tab-content">您可以通過刪除來清理代碼10級和</img>。 <img>是一個獨立的標籤，不需要結束標籤，例如下面的代碼。

請參見下面的代碼：

<ul id="myTab" class="nav"> 
    <li class="dropdown active"> 
    <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> Designs and Concepts <span class="caret"></span></button> 
    <ul class="dropdown-menu"> 
     <li class=""><a href="#test1" data-toggle="tab">Test1</a></li> 
     <li class=""><a href="#test2" data-toggle="tab">Test2</a></li> 
     <li class=""><a href="#test3" data-toggle="tab">Test3</a></li> 
    </ul> 
    </li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane fade active"></div> 
    <div class="tab-pane fade" id="test1"> 
     <img class="img-responsive"src="#" /> 
     <p>This is the first test section/p> 
    </div> 
    <div class="tab-pane fade" id="test2"> 
     <img class="img-responsive"src="#" style="width:250px;" /> 
     <p>This is the second test section.</p> 
    </div> 
    <div class="tab-pane fade" id="test3"> 
     <img src="#" /> 
     <p>This is the third test section</p> 
    </div> 
</div> 

我希望這有助於！