HTML 导航选项卡不起作用答案

【问题标题】：HTML navigation tabs doesn't workHTML 导航选项卡不起作用
【发布时间】：2017-02-02 05:34:50
【问题描述】：

您好，我对引导程序有疑问。我的代码不起作用是有什么问题吗？有什么办法解决这个问题吗？--谢谢

<nav id='nav-reservation'>
    <div class="container">
        <ul class="nav nav-tabs">
            <a href='resource-index.php?page=room' class='nav-reservation-item <?php if($_REQUEST[' page '] == "room"){ echo "active"; } ?>'>Room</a>
            <a href='resource-index.php?page=equipment' class='nav-reservation-item <?php if($_REQUEST[' page '] == "equipment"){ echo "active"; } ?>'>Equipment </a>
            </ul>
    </div>

    <div class="tab-content">
        <div id="room" class="tab-pane fade in active"></div>
        <div id="equipment" class="tab-pane fade in active"></div>
     </div>   
</nav>

【问题讨论】：

标签： html twitter-bootstrap navbar nav

【解决方案1】：

你忘记在ul标签中添加li标签了。

<nav id='nav-reservation'>
<div class="container">
    <ul class="nav nav-tabs">
       <li> <a href='resource-index.php?page=room' class='nav-reservation-item <?php if($_REQUEST[' page '] == "room"){ echo "active"; } ?>'>Room</a></li>
    <li>    <a href='resource-index.php?page=equipment' class='nav-reservation-item <?php if($_REQUEST[' page '] == "equipment"){ echo "active"; } ?>'>Equipment </a></li>
        </ul>
</div>

<div class="tab-content">
    <div id="room" class="tab-pane fade in active"></div>
    <div id="equipment" class="tab-pane fade in active"></div>
 </div>

【讨论】：

我尝试添加 ul 标记，导航选项卡恰好在下一行:(
添加它的sn-p。 @TheJoempossibleDream

【解决方案2】：

第一件事是您的两个选项卡内容窗格都具有in active 类，并且唯一应该具有这些类的是活动的打开窗格。将这两个与in active 类一起显示将同时显示两个选项卡。

接下来，这些选项卡由导航选项卡的 href 中的标签激活。而且你没有标签。它们应该与您要打开的选项卡窗格相对应。因此，如果您想在导航选项卡的 href 中打开 ID 为 #room 的选项卡，则应指定此选项。你也应该把data-toggle="tab" 放在href 中，就像这样：

<a data-toggle="tab" href="#room">Room</a>

这将打开 ID 为 #room 的选项卡

因此，如果没有自定义 php，您的标记应该如下所示：

    <ul class="nav nav-tabs">
      <li class="active"><a  data-toggle="tab" href="#room">Room</a></li>
      <li><a  data-toggle="tab" href="#equipment">Equipment</a></li>
    </ul>

    <div class="tab-content">
      <div id="room" class="tab-pane fade in active">
        First Tab
      </div>
      <div id="equipment" class="tab-pane fade">
        Second Tab
      </div>
    </div>

【讨论】：