zoukankan      html  css  js  c++  java
  • 01_bootStrap中Tab页签切换

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset = 'utf-8'>
     5     <title>test</title>
     6     <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css">
     7     <link rel="stylesheet" type="text/css" href="2_3.css">
     8 </head>
     9 <body>
    10     <ul class="nav nav-tabs" id="tabs1">
    11         <li class="active"><a href="#tab1" data-taggle="tab" class="t1">tab1</a></li>
    12         <li><a href="#tab2" data-taggle="tab" class="t2">tab2</a></li>
    13         <li><a href="#tab3" data-taggle="tab" class="t3">tab3</a></li>
    14         <li><a href="#tab4" data-taggle="tab" class="t4">tab4</a></li>
    15     </ul>
    16     <div class="tab-content">
    17         <div class="tab-pane active" id="tab1">
    18             <img src="../images/1.jpg">
    19         </div>
    20         <div class="tab-pane" id="tab2">
    21             <img src="../images/2.jpg">
    22         </div>
    23         <div class="tab-pane" id="tab3">
    24             <img src="../images/3.jpg">
    25         </div>
    26         <div class="tab-pane" id="tab4">
    27             <img src="../images/4.jpg">
    28         </div>
    29     </div>
    30     
    31     <!--将js置于文档的尾部 -->
    32     <script type="text/javascript" src="../jquery/jquery-1.9.1.js"></script>
    33     <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
    34     <script type="text/javascript">
    35         
    36     $(function () { 
    37            
    38         //$('#tabs1 a:last').tab('show');//初始化显示哪个tab 
    39             
    40         $('#tabs1 a').click(function (e) { 
    41             
    42         e.preventDefault();//阻止a链接的跳转行为 
    43 
    44         $(this).tab('show');//显示当前选中的链接及关联的content 
    45         }) 
    46     });
    47     </script>
    48 </body>
    49 </html>

      更多灵活的方式来激活某个特定的tab:

    1 $('#myTab a[href="#profile"]').tab('show'); // Select tab by name 
    2 
    3  $('#myTab a:first').tab('show'); // Select first tab 
    4 
    5  $('#myTab a:last').tab('show'); // Select last tab 
    6 
    7  $('#myTab li:eq(2) a').tab('show');

      

      注意: 每个li中的a标签都要有个href=#id,这个id指向的正是该链接对应的content的id,如果使用javascript实现这种导航内容的切换,a标签中无须再添加data-toggle='tab',当然,如果每个a链接都使用了此属性,那完全没有必要在用js来实现了。

  • 相关阅读:
    HttpClient实现跨域请求
    Https如何让防止被监听
    Java 开发必会的工具类,代码量立减90%
    Java 临时变量的使用
    Java后端实现页面跳转
    Mybatis 实体类映射为null“坑”
    System.getProperty()_基本使用
    React项目中使用 FullCalendar v4 插件进行日程管理
    生成随机字符串工具示例
    java 图片与文件之间互转
  • 原文地址:https://www.cnblogs.com/wuxiaokai/p/5026369.html
Copyright © 2011-2022 走看看