下拉菜单功能与数据切换（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> 

我希望这有助于！