0

我正在使用引导导航选项卡

<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 元素都有显示“视频”、“行情”等的元素。

当每个 li 元素在单击时变为活动状态时，我希望在实际存在的文本之前附加“鼓舞人心”的词，

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

我正在尝试使用 jquery 代码，但在不影响原始选项卡功能的情况下我无法通过

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

    });

使用单独的选择器选择原始选项卡功能$("#homeTabs").nav()

4

2 回答 2

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

 });

工作演示

于 2013-10-25T06:12:58.927 回答
1

只需这样做：

$(".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", ""));
        }
    });
});

工作jsfiddle

于 2013-10-25T06:28:38.803 回答