zoukankan      html  css  js  c++  java
  • Bootstrap与tab组合,切换菜单实例

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Test</title>

    <link rel="stylesheet" href="bootstrap-3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-3.3.4/bootstrap-table.min.css">
    <script src="bootstrap-3.3.4/jquery.js"></script>
    <script src="bootstrap-3.3.4/js/bootstrap.min.js"></script>
    <script src="bootstrap-3.3.4/bootstrap-table.min.js"></script>
    <script>
    $(function () {
    $('#myTab a:last').tab('show');//初始化显示哪个tab

    $('#myTab a').click(function (e) {
    e.preventDefault();//阻止a链接的跳转行为
    $(this).tab('show');//显示当前选中的链接及关联的content
    })
    })
    </script>
    </head>
    <body>
    <ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
    <li><a href="#服务器">服务器</a></li>
    </ul>
    <div class="tab-content">
    <div class="tab-pane active" id="home">.home..</div>
    <div class="tab-pane" id="profile">..profile.</div>
    <div class="tab-pane" id="messages">..messages.</div>
    <div class="tab-pane" id="settings">.settings..</div>
    <div class="tab-pane" id="服务器">.#服务器..</div>
    </div>

    </body>
    </html>

    ======================================动态生成的实例===================================

    //js部分

    function queryCategory() {
    $.getJSON("category/querySecondCategory.do", function(datas) {
    var i=0;
    for(var key in datas){
    var j=0;
    if(i==0){
    $("#myTab").append("<li class='active'><a href=#"+key+">"+key+"</a></li>");
    i++;
    }else{
    $("#myTab").append("<li><a href=#"+key+">"+key+"</a></li>");
    }
    $(".tab-content").append("<div class='tab-pane' id="+key+"></div>")

    for(var obj in datas[key]){
    if(j==0){
    $("#"+key).append('<label class="btn btn-default"> <input checked="ture" class="toggle" type="radio" name="classType'+key+'" value="'+datas[key][obj].id+'">'+datas[key][obj].name+'</label>');
    j++;
    }else{
    $("#"+key).append('<label class="btn btn-default"> <input class="toggle" type="radio" name="classType'+key+'" value="'+datas[key][obj].id+'">'+datas[key][obj].name+'</label>');
    }
    }

    }
    tabs();//设置默认值,展示顺序
    });
    }

    function tabs(){
    $('#myTab a:last').tab('show');//初始化显示哪个tab

    $('#myTab a').click(function (e) {
    e.preventDefault();//阻止a链接的跳转行为
    $(this).tab('show');//显示当前选中的链接及关联的content
    })
    }

    //html部分

    <ul class="nav nav-tabs" id="myTab">
    </ul>
    <div class="tab-content">
    </div>

  • 相关阅读:
    09不可变类型
    08浅拷贝和深拷贝
    07参数的传递
    06判等对象是否相等
    05引用类型以及特殊引用类型string
    报错:Missing type map configuration or unsupported mapping
    黄聪:VS2010开发T4模版引擎之基础入门
    黄聪:《网站高转换率法则》#2:你的网站是垃圾站吗?
    黄聪:《网站高转换率法则》#1:为什么要研究网站转换率?
    黄聪:百度知道中对HTML字符实体、字符编号,&开头字符的使用
  • 原文地址:https://www.cnblogs.com/xumr/p/5690455.html
Copyright © 2011-2022 走看看