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组合，切换菜单实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。