0

ブートストラップnavtabを使用しています

<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要素がアクティブになると、実際にあるテキストの前に「インスピレーション」という単語を追加したいのですが、

たとえば、「Videos」が実際のテキストである場合、ユーザーがタブにカーソルを合わせると「Inspiring Videos」と表示され、「Inspiring Videos」という単語をクリックするとそのまま残り、以前に追加された刺激的なものは削除されます。

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 に答える