Jquery 引导选项卡：在活动选项卡中添加/删除跨距

我设置了引导选项卡，这样我就有了4个选项卡，其中一个活动类位于锚点上

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

---

有什么想法吗？

您可以使用CSS来实现这一点，然后将“before”psuedo元素的样式设置为span：

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

试试这个

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

$（'ulli a.active'）。前置（'Test-'）；

如果希望它始终位于当前选项卡上，则需要将其绑定到锚点的单击事件，删除旧跨度并将其添加到新选择的跨度

像这样：

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

$（'ulli a.active'）。前置（'Test-'）；
$（'ul li a'）。单击（函数（）{
var activeSpan=$（'.activeSpan'）.remove（）；
$（this）.prepend（activeSpan）；
});

---

这里有一个

非常感谢您，毕竟这是非常简单的。有没有办法在每个li选项卡中添加一个选项卡，然后将文本更改为“活动选项卡”。图例！非常感谢你，约翰·内森