Bootstrap選項卡：添加/刪除活動選項卡內的span範圍

我設置了bootstrap選項卡，以便在錨點上有4個選項卡和活動類。Bootstrap選項卡：添加/刪除活動選項卡內的span範圍

<ul> 
    <li><a href="#">Tab 1</a></li> 
    <li class="active"><a href="#">Tab 2</a></li> 
    <li><a href="#">Tab 3</a></li> 
    <li><a href="#">Tab 4</a></li> 
</ul>

我想添加一些jQuery在活動鏈接中添加額外的跨度。

<ul> 
    <li><a href="#">Tab 1</a></li> 
    <li class="active"><a href="#"><span>This is the current tab</span>Tab 2</a></li> 
    <li><a href="#">Tab 3</a></li> 
    <li><a href="#">Tab 4</a></li> 
</ul>

有關如何做到這一點的任何想法？

來源

2013-05-06 user1696182

試試這個

$('ul li a.active').prepend('<span>Test - </span>');

如果你想讓它

始終在當前選項卡上，您需要將此綁定到錨的點擊事件，刪除舊的跨度並將其添加到新選定的一個。

像這樣：

$('ul li a.active').prepend('<span class="activeSpan">Test - </span>'); 
$('ul li a').click(function(){ 
    var activeSpan = $('.activeSpan').remove(); 
    $(this).prepend(activeSpan); 
});

這裏還有一個fiddle

來源

2013-05-07 00:04:14 Jonathan

謝謝你這麼多，這是非常簡單的畢竟。 – user1696182 2013-05-07 00:31:35

有沒有辦法在每個li標籤上添加一個標籤，只需將文本更改爲選項卡激活。 – user1696182 2013-05-07 02:18:15

是的，這裏有一個小提琴：http://jsfiddle.net/wnuEE/1/ – Jonathan 2013-05-07 02:27:26

你可以用CSS做到這一點，然後只風格的「前」僞元素，就好像它是一個跨度：

li a.active::before { 
    content: "This is the current tab"; 
}

來源

2013-05-06 23:58:33 dave

Bootstrap選項卡：添加/刪除活動選項卡內的span範圍

回答

相關問題