• bootstrap tabs 默认tab页的使用方式


    HTML中引入tabs如下:

    <ul class="nav">
        <li><a href="#a" tt="A.html" data-toggle="tab">页面A</a></li>
        <li><a href="#b" tt="B.html" data-toggle="tab">页面B</a></li>
        <li><a href="#c" tt="C.html" data-toggle="tab">页面C</a></li>
    </ul>
    
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane active" id="a"></div>
        <div class="tab-pane" id="b"></div>
        <div class="tab-pane" id="c"></div>
    </div>
    

      js中使用方式:

    /*选择性加载页面,初始加载页面A*/    
     $(function() {
            $(".nav li").click(function () {
                var _a = $(this).find("a");   
                if($(_a.attr("href")).html()==""){   //判断页面是否已加载
                    $(_a.attr("href")).addClass("active").siblings().removeClass("active");  
    			//tab页点击事件对应的页面元素置为"active"样式,其他兄弟页面移除"active"样式  
                    $(_a.attr("href")).load(_a.attr("tt"));  
    			//加载样式为"active"的页面
                }
            }); 
            $(".nav.nav-tabs li").get(0).click();    //默认选择加载第一个页面A
     });
    

      

  • 相关阅读:
    Ubuntu 安装mysql和简单操作
    fatal error: mysql.h: No such file or directory
    彻底删除win10系统下的mysql
    ORACLE 回收站导致的故障
    Log Buffer
    ORACLE数据库存储结构
    Shared pool
    ORACLE 实例及RAC
    Buffer Cache
    数据库dump导入
  • 原文地址:https://www.cnblogs.com/hunterCecil/p/7544848.html
Copyright © 2020-2023  润新知