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来实现了。

  • 相关阅读:
    struts2-Action配置-通配符-DMI
    struts2中struts.xml和web.xml文件解析及工作原理
    IntelliJ IDEA 的Project structure说明
    深入理解乐观锁与悲观锁
    共享锁(S锁)和排它锁(X锁)
    乐观锁和悲观锁
    事务并发的可能问题与其解决方案
    Ehcache配置详解及CacheManager使用
    Hibernate一级缓存、二级缓存以及查询缓存的关系
    【转】Spring 的下载、安装和使用
  • 原文地址:https://www.cnblogs.com/wuxiaokai/p/5026369.html
Copyright © 2011-2022 走看看