CODEWITHSUNDEEP
jquerytwitter-bootstrap
Jagan K
Jagan K

Reputation: 1057

Change the inner html of selected element using jQuery

I am using 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>

Each li element have element that has displays like "Video", "Quotes" etc.

when every li element becomes active when clicked, i wish to append "Inspiring" word before what text that is actually there,

example if "Videos" is actual text, then when the user hovers on the tab, it should show "Inspiring Videos", when clicked the word "Inspiring videos" should stay, any previously added inspiring should get removed.

I am trying with jquery code, but i can't get through without affecting orignial tab functionality

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

    });

The original tab functionlity is selected with seperate selector $("#homeTabs").nav()

Upvotes: 0

Views: 943

Answers (2)

Somnath Kharat
Somnath Kharat

Reputation: 3600

Just do this:

$(".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

Upvotes: 1

Ajinkya
Ajinkya

Reputation: 22710

Just change text of hyperlink

$(".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

Upvotes: 1

Related Questions