問題與Twitter Bootstrap藥片

我有Bootstrap選項卡/藥片插件的問題。問題與Twitter Bootstrap藥片

我想顯示所有div（a,b和c），所以我不需要標籤來隱藏它們。我希望讓用戶能夠在頁面上從一個區域移動到另一個區域。問題：

當用戶點擊鏈接時，未示出的內容（例如用於容器a和b）。
刪除data-toggle="pill"內容顯示，但鏈接未標記爲.active類。

我準備了這個小提琴：http://jsfiddle.net/DLRmp/向你展示問題。希望你能幫助我，文件似乎關於丸有點差：

<ul class="nav nav-pills nav-stacked"> 
    <li class="active"><a data-toggle="pill" href="#a">a</a></li> 
    <li class=""><a data-toggle="pill" href="#b">b</a></li> 
    <li class=""><a href="#c">c</a></li> 
</ul> 

<div id="a">I'm not working: when user clicks the link nothing happens. 
    But at least link is marked as active!</div> 

<div id="b">Me too. I'm not working: when user clicks the link nothing happens. 
    But at least link is marked as active! </div> 

<div id="c">I'm working, but link is not marked as active!</div>

來源

2012-07-19 gremo

問題1：當你點擊href="#c"，沒有活動類添加。在您發佈在本頁上的小提琴和代碼中，您沒有將data-toggle="pill"屬性添加到c鏈接。

問題2：在視察boostrap tab javascript file，注意他們的插件的底部下面的代碼：

 /* TAB DATA-API 
    * ============ */ 

    $(function() { 
    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { 
     e.preventDefault() 
     $(this).tab('show') 
    }) 
    })

尤其要注意使用的e.preventDefault()。我相信這就是爲什麼你的「藥丸」鏈接不會跳轉到頁面內容。

可能的解決辦法：我想還有其他的方式來完成你想要做什麼，而是一個辦法是通過你自己的jQuery函數與.active課堂上播放。

http://jsfiddle.net/3aANQ/3/

$(".nav-stacked li").click(function() { 
    $(".nav-stacked li").removeClass("active"); 
    $(this).addClass("active"); 
});

來源

2012-07-20 00:36:44 mg1075

我用這個JavaScript代碼（裝在文件準備應用於所有丸）

$('ul.nav.nav-pills li a').click(function() {   
    $(this).parent().addClass('active').siblings().removeClass('active');   
});

來源

2012-07-30 12:51:15

問題與Twitter Bootstrap藥片

回答

相關問題