bootstrap 合并菜单_Bootstrap与tab组合，切换菜单实例

Test

$(function () {

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

$('#myTab a').click(function (e) {

e.preventDefault();//阻止a链接的跳转行为

$(this).tab('show');//显示当前选中的链接及关联的content

})

})

• Home
• Profile
• Messages
• Settings
• 服务器

.home....profile...messages..settings...#服务器..

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

//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("

"+key+"");

i++;

}else{

$("#myTab").append("

"+key+"");

}

$(".tab-content").append("

for(var obj in datas[key]){

if(j==0){

$("#"+key).append(' '+datas[key][obj].name+'');

j++;

}else{

$("#"+key).append(' '+datas[key][obj].name+'');

}

}

}

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

});

}

function tabs(){

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

$('#myTab a').click(function (e) {

e.preventDefault();//阻止a链接的跳转行为

$(this).tab('show');//显示当前选中的链接及关联的content

})

}

//html部分

总结

以上是生活随笔为你收集整理的bootstrap 合并菜单_Bootstrap与tab组合，切换菜单实例的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。