Question

我设置了引导标签，这样我就可以在锚点上有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来在活动链接中添加额外的span。

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

关于如何做到这一点的任何想法？

Answer 1

您可以使用CSS执行此操作，然后将“之前”伪元素设置为样式，就好像它是一个跨度：

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

Answer 2

试试这个

$('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

Bootstrap选项卡：在活动选项卡中添加/删除span

2 个答案: