zoukankan      html  css  js  c++  java
  • Bootstrap_Javascript_选项卡

      选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项,能切换出对应的内容。

    一 . 结构分析

    Bootstrap框架中的选项卡主要有两部分内容组成:

    • 选项卡组件(也就是菜单组件),对应的是 Bootstrap的 nav-tabs
    • 底部可以切换的选项卡面板,在 Bootstrap 中通常 tab-pane 来表示

    二.  data-toggle触发选项卡(无需JS)

      声明式触发选项卡需要满足以下几点要求:


      1、选项卡导航链接中要设置 data-toggle="tab"

      2、并且设置 data-target="对应内容面板的选择符(一般是ID)";

      3、面板内容统一放在 tab-content 容器中,而且每个内容面板 tab-pane 都需要设置一个独立的选择符(最好是ID)与选项卡中的 data-target 或 href 的值匹配。

    <!-- 选项卡组件(菜单项nav-tabs)-->
    <ul id="myTab" class="nav nav-tabs" role="tablist">
      <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
      <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
      <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
      <li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
      <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
    </ul>
    <!-- 选项卡面板 -->
    <div id="myTabContent" class="tab-content">
      <div class="tab-pane active" id="bulletin">公告内容面板</div>
      <div class="tab-pane" id="rule">规则内容面板</div>
      <div class="tab-pane" id="forum">论坛内容面板</div>
      <div class="tab-pane" id="security">安全内容面板</div>
      <div class="tab-pane" id="welfare">公益内容面板</div>
    </div>

     

    三 . JavaScript触发选项卡

      调用方法:

      在每个链接的单击事件中调用tab("show")方法,显示对应的标签面板内容.

    HTML:

    <ul id="myTab" class="nav nav-pills" role="tablist">
      <li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li>
      <li><a href="#rule" role="tab" >规则</a></li>
      <li><a href="#forum" role="tab" >论坛</a></li>
      <li><a href="#security" role="tab" >安全</a></li>
      <li><a href="#welfare" role="tab" >公益</a></li>
    </ul>
    <!-- 选项卡面板 -->
    <div id="myTabContent" class="tab-content">
      <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
      <div class="tab-pane fade" id="rule">规则内容面板</div>
      <div class="tab-pane fade" id="forum">论坛内容面板</div>
      <div class="tab-pane fade" id="security">安全内容面板</div>
      <div class="tab-pane fade" id="welfare">公益内容面板</div>
    </div>

    JS:

    <script>
      $(function(){
        $("#myTab a").click(function(e){
          e.preventDefault();
          $(this).tab("show");
        });
      })
    </script>

    四 . 选项卡样式

      为了让面板的隐藏与显示在切换的过程效果更流畅,可以在面板中添加类名 fade,让其产生渐入的效果。

      在添加 fade 样式时,最初的默认显示的内容面板一定要记得加上 in 类名,不然其内容用户无法看到。

    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
        <div class="tab-pane fade" id="rule">规则内容面板</div>
        <div class="tab-pane fade" id="forum">论坛内容面板</div>
        <div class="tab-pane fade" id="security">安全内容面板</div>
        <div class="tab-pane fade" id="welfare">公益内容面板</div>
    </div>
  • 相关阅读:
    xss漏洞
    web日志分析(待)
    linux命令学习摘记
    浏览器的MIME映射(程序映射)
    文件上传靶场-Upload-Labs
    目录遍历用字典
    cmd、bat分割单行字符串
    iptables使用
    Spring AOP 学习(五)
    Spring 使用注解注入 学习(四)
  • 原文地址:https://www.cnblogs.com/Ryan344453696/p/5008844.html
Copyright © 2011-2022 走看看