Question

我正在使用bootstrap navtabs

<ul class="nav nav-tabs shorttabs" id="homeTabs">
                        <li data-have="Pictures" class="active"><a href="#pictures">Inspiring Pictures</a></li>
                        <li data-have="Videos"><a href="#videos">Videos</a></li>
                        <li data-have="Quotes"><a href="#quotes">Quotes</a></li>
                        <li data-have="People"><a href="#people">People</a></li>
                        <li data-have="Books"><a href="#books">Books</a></li>
                        <li data-have="Messages"><a href="#books">Messages</a></li>

                      </ul>

每个li元素的元素都有“Video”，“Quotes”等显示。

当每个li元素在点击时变为活动状态时，我希望在实际存在的文本之前添加“Inspiring”字样，

示例如果“视频”是实际文本，那么当用户在选项卡上悬停时，它应该显示“激励视频”，当点击“激励视频”这个词应该保留时，任何以前添加的鼓舞人心的应该被删除。

我正在尝试使用jquery代码，但我无法在不影响orignial标签功能的情况下实现

$(".shorttabs li").on("click", function(){
    var test = $(this).html
    console.log(test);

    });

使用单独的选择器$("#homeTabs").nav()

选择原始制表符功能

Answer 1

只需更改超链接的文字

即可

$(".shorttabs li a").on("click", function(){
    // Remove inspiring from all anchors
    $(".shorttabs li a").each(function(){
        $(this).text($(this).text().replace("inspiring",""));
    });

    // Add to current one 
    $(this).text("inspiring" + $(this).text);

 });

Working Demo

Answer 2

这样做：

$(".shorttabs li a").on("click", function () {
    $this = $(this).text();
    // alert($this);
    $(".shorttabs li a").each(function () {
        //alert($(this).text());
        if ($(this).text() == $this) {
            if ($(this).text().indexOf("Inspiring") < 0) {
                $(this).text("Inspiring" + $(this).text());
            }
        } else {
            $(this).text($(this).text().replace("Inspiring", ""));
        }
    });
});

Working jsfiddle

使用jQuery更改所选元素的内部html

2 个答案: