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范围

回答

相关问题