Question

在我正在构建的用于学习Rails和JS的应用程序中，我想使用制表符导航。

这是我的标签导航，指向3个部分。我现在正在寻找创建JavaScript。单击选项卡并将类激活设置为单击的<li>，同时显示相应的部分时，如何处理此问题？

我不能做getElementById左右。所以，我需要这样的结构：

$("li.presentation").on("click", function(event) { ...
    $(...).class("active");
    $(...).toggle();
};

所有帮助表示赞赏！

<nav>
  <ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#tab1">Details</a></li>
    <% unless @annotation.new_record? %>
    <li role="presentation"><a href="#tab2">Tags</a></li>
    <li role="presentation"><a href="#tab2">Comments</a></li>
    <% end -%>
   </ul>
</nav>

节

<section id="tab1" class="tab1">
    <p>Section 1 content here </p>
</section>
<section id="tab2" class="tab2">
    <p>Section 2 content here </p>
</section>
<section id="tab3" class="tab3">
    <p>Section 1 content here </p>
</section>
<section id="tab3" class="tab3">
    <p>Section 3 content here </p>
</section>

这是我的css

.tab1 {
    display: block;
}

.tab2 {
    display: none;
}

.tab3 {
    display: none;
}

Answer 1

您无需推出自己的自定义JavaScript和css即可完成此操作。您可以在制表符锚中使用Bootstrap's内置data-toggle="tab"属性。

<div class="container">
    <ul class="nav nav-tabs">
      <!-- add data-toggle attribute to the anchors -->
      <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
      <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
      <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    </ul>
      <div class="tab-content">
      <div id="home" class="tab-pane fade in active">
        <h3>HOME</h3>
        <p>Some content.</p>
      </div>
      <div id="menu1" class="tab-pane fade">
        <h3>Menu 1</h3>
        <p>Some content in menu 1.</p>
      </div>
      <div id="menu2" class="tab-pane fade">
        <h3>Menu 2</h3>
        <p>Some content in menu 2.</p>
      </div>
    </div>
</div>

这是一个现场演示：
http://www.bootply.com/ZSu8N3bB03

Bootstrap Nav-tab显示隐藏内容

1 个答案: