<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>

Bootstrap与tab组合，切换菜单实例的更多相关文章

  1. Bootstrap——设置Tab标签切换

    最近一个小项目需要用Tab标签切换显示不同div内容,用到了Bootstrap里面的东西,但是在Bootstrap3教程里却没有找到对应的代码,这里记录一下,方便以后快速查阅学习. 代码如下: < ...

  2. 下拉菜单效果和tab选项卡切换

    //下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  3. 标签页（tab）切换的原生js,jquery和bootstrap实现

    概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...

  4. 每天一个JavaScript实例-tab标签切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. Python学习笔记五：字符串常用操作，字典，三级菜单实例

    字符串常用操作 7月19日,7月20日 ,7月22日,7月29日,8月29日,2月29日 首字母大写:a_str.capitalize() 统计字符串个数:a_str.count(“x”) 输出字符, ...

  6. JS特效之Tab标签切换

    在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...

  7. 网站开发，推荐使用SuperSlide 插件-Tab标签切换，图片滚动，无缝滚动，焦点图

    SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...

  8. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  9. bootstrap的tab中，echarts 图表宽度设为100%之后，会出现图表宽带变为100px的情况。只有第一个正常

    1.原因 echarts官方解释是 Tip: 有时候图表会放在多个标签页里,那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽,可能会绘制失败,因此在切换到该标签页时需要手动调用resiz ...

随机推荐

  1. bzoj3171

    不难发现,每个点出度显然为1,要想整个图形成环,必然每个点的入度也为1: 所以,不难想到将每个点i拆成两个点i1,i2构成二分图, 连边s--->i1 流量为1,费用为0,i2--->t流 ...

  2. bzoj1670

    第一道凸包 采用Andrew算法,不论实现还是理解都非常简单 ..] of longint;     i,j,k,m,n:longint;     ans:double; procedure swap ...

  3. 解决Dagger2和butterknife冲突

    dagger2 和 RxJava butterknife 以及 Retrofit使用起来非常酸爽 代码非常干净清晰 动手尝试 配置编译 DaggerAppComponent的时候 出现问题 配置dag ...

  4. LinkedList源码解析

    LinkedList是基于链表结构的一种List,在分析LinkedList源码前有必要对链表结构进行说明.1.链表的概念链表是由一系列非连续的节点组成的存储结构,简单分下类的话,链表又分为单向链表和 ...

  5. Frank自动化测试

    记得是夏天的时候去参加一个infoQ的论坛,里面有一个朋友强烈推荐Frank测试框架.所以趁着年底赶紧学一下.这中间需要ruby的基础. 安装过程:1.安装frank-cucumber 命令: sud ...

  6. Oracle的dmp文件的导入

    项目开始拿到了dmp文件,数据库用的是10g的,但是尽然没导成功,后来想可能导出的时候用11导出的,决定试一下. 正好自己的机器是11的客户端,结果不识别imp命令,到安装目录下的bin文件夹下看尽然 ...

  7. 经典sql总结(2)

    如何做呢,跟上文区别不大. 我建个表,输入以下 select year, () as m1, () as m2, () as m3 from info2 as t group by year;

  8. bzoj 1877 [SDOI2009]晨跑（最小费用最大流）

    Description Elaxia最近迷恋上了空手道,他为自己设定了一套健身计划,比如俯卧撑.仰卧起坐等 等,不过到目前为止,他坚持下来的只有晨跑. 现在给出一张学校附近的地图,这张地图中包含N个十 ...

  9. vijosP1447 开关灯泡

    vijosP1447 开关灯泡 链接:https://vijos.org/p/1447 [思路] 数学+高精度. 分析题目:题中有言,i时刻将其所有倍数的灯熄灭,由此得知一个数有多少个倍数就会被操作多 ...

  10. HDU4745 - Two Rabbits(区间DP)

    题目大意 给出一个长度为n的环状序列,两只兔子各自从一个点出发,一个顺时针跳,一个逆时针跳,每个时刻都要求两只兔子所在的数字是相同的,兔子最多跳一个圈~~~问兔子们最多能跳多少次 题解 一个逆时针跳, ...