Bootstrap Nav-tab 显示隐藏内容 [英] Bootstrap Nav-tab show hide content

问题描述

在我为学习 Rails 和 JS 而构建的应用程序中，我想使用选项卡导航.

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

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

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

感谢所有帮助！

<ul class="nav nav-tabs"><li role="presentation" class="active"><a href="#tab1">详情</a></li><% 除非@annotation.new_record?％＞<li role="presentation"><a href="#tab2">标签</a></li><li role="presentation"><a href="#tab2">评论</a></li><%结束-%></nav>

部分

<p>这里是第 1 节的内容 </p></节><section id="tab2" class="tab2"><p>这里是第 2 节的内容 </p></节><section id="tab3" class="tab3"><p>这里是第 1 节的内容 </p></节><section id="tab3" class="tab3"><p>这里是第 3 节的内容 </p></节>

这是我的css

.tab1 {显示:块；}.tab2 {显示:无；}.tab3 {显示:无；}

解决方案

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

<ul class="nav nav-tabs"><!-- 为锚点添加 data-toggle 属性--><li class="active"><a data-toggle="tab" href="#home">Home</a></li><li><a data-toggle="tab" href="#menu1">菜单 1</a></li><li><a data-toggle="tab" href="#menu2">菜单 2</a></li><div class="tab-content"><div id="home" class="tab-pane淡入活动"><h3>家</h3><p>一些内容.</p>
<div id="menu1" class="tab-pane淡入淡出"><h3>菜单 1</h3><p>菜单 1 中的某些内容.</p>

<div id="menu2" class="tab-pane淡入淡出"><h3>菜单 2</h3><p>菜单 2 中的一些内容.</p>

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

In the app that I am building to learn Rails and JS, I want to use tab-navigation.

This is my tab-navigation pointing to 3 sections. I am now looking to create the JavaScript. How to I approach this when clicking the tabs and set class active to the clicked <li> while display the respective section?

I can't do getElementById or so. So, I need something like this structure:

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

All help appreciated!

<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>

Sections

<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>

This is my css

.tab1 {
    display: block;
}

.tab2 {
    display: none;
}

.tab3 {
    display: none;
}

解决方案

You don't need to roll out your own custom JavaScript and css to accomplish this. You can use Bootstrap's built-in data-toggle="tab" attribute in your tab anchors.

<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>

Here is a live demo:
http://www.bootply.com/ZSu8N3bB03

这篇关于Bootstrap Nav-tab 显示隐藏内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！