0

我设置了引导选项卡，以便在锚点上有 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>

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

4

2 回答 2

1

尝试这个

$('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);
});

这是一个小提琴

于 2013-05-07T00:04:14.037 回答
1

您可以使用 CSS 来做到这一点，然后只需设置“之前”伪元素的样式，就好像它是一个跨度一样：

li a.active::before {
   content: "This is the current tab";
}
于 2013-05-06T23:58:33.300 回答