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>
Bootstrap与tab组合，切换菜单实例的更多相关文章
- Bootstrap——设置Tab标签切换
最近一个小项目需要用Tab标签切换显示不同div内容,用到了Bootstrap里面的东西,但是在Bootstrap3教程里却没有找到对应的代码,这里记录一下,方便以后快速查阅学习. 代码如下: < ...
- 下拉菜单效果和tab选项卡切换
//下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 标签页（tab）切换的原生js,jquery和bootstrap实现
概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...
- 每天一个JavaScript实例-tab标签切换
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Python学习笔记五：字符串常用操作，字典，三级菜单实例
字符串常用操作 7月19日,7月20日 ,7月22日,7月29日,8月29日,2月29日 首字母大写:a_str.capitalize() 统计字符串个数:a_str.count(“x”) 输出字符, ...
- JS特效之Tab标签切换
在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...
- 网站开发，推荐使用SuperSlide 插件-Tab标签切换，图片滚动，无缝滚动，焦点图
SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...
- 纯js实现网页tab选项卡切换效果
纯js实现网页tab选项卡切换效果 百度搜索 js 点击菜单项就可以切换内容的效果
- bootstrap的tab中，echarts 图表宽度设为100%之后，会出现图表宽带变为100px的情况。只有第一个正常
1.原因 echarts官方解释是 Tip: 有时候图表会放在多个标签页里,那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽,可能会绘制失败,因此在切换到该标签页时需要手动调用resiz ...
随机推荐
- Hibernate java.lang.NoSuchFieldError: INSTANCE
在使用hibernate3.6.2是我遇到了一个有趣的错误java.lang.NoSuchFieldError: INSTANCEat org.hibernate.type.BasicTypeRegi ...
- 六月计划#1A(6.1-6.8)
5/35 数学 BZOJ_[HNOI2008]_Cards_(置换+Burnside引理+乘法逆元+费马小定理+快速幂) BZOJ_1005_ [HNOI2008]_明明的烦恼_(组合数学+purfe ...
- Oracle Java SE远程安全漏洞（CVE-2013-5878）
漏洞版本: Oracle Java SE 7u45 Oracle Java SE 6u65 漏洞描述: BUGTRAQ ID: 64927 CVE(CAN) ID: CVE-2013-5878 Jav ...
- 【CSS3】
Web前端实验室http://demo.doyoe.com/ ::before ::afterCSS3已经将伪元素的前缀更改为双冒号,而伪类则保持为单冒号 backface-visibility ht ...
- -_-#【减少 DOM 元素】textarea, script 延迟渲染
淘宝详情页的 BigRender 优化与存放大块 HTML 内容的最佳方式 淘宝详情页的BigRender优化的最佳方式 <!DOCTYPE html> <html> < ...
- GML、SVG、VML的比较
转自:http://www.cnblogs.com/3echo/archive/2009/02/19/1394399.html GML.SVG和VML都是基于XML的可用来描述矢量图形的标记语言,都是 ...
- POJ -- 3233 求“等比矩阵”前n（n <=10^9）项和
Matrix Power Series Description Given a n × n matrix A and a positive integer k, find the sum S = ...
- cloudstack安装篇1-linux命令修改IP信息
方式一: ifconfig eth0 192.168.1.18 netmask 255.255.255.0 说明:该种方式可以使改变即时生效,重启后会恢复为原来的IP 方式二: vi ...
- deep learning(1)BP神经网络原理与练习
具体原理参考如下讲义: 1.神经网络 2.反向传导 3.梯度检验与高级优化 看完材料1和2就可以梳理清楚bp神经网络的基本工作原理,下面通过一个C语言实现的程序来练习这个算法 //Backpropag ...
- 表达式计算器（LL1文法）
LL(1)文法求算数表达式的值递归子程序法 分析过程: 表达式文法G[E]:E->E+T|E-T|TT->T*F|T/F|T%F|FF->N^F|NN->(E)|NUM|+NU ...