CODEWITHSUNDEEP
javascripttwitter-bootstrap
Saurabh Verma
Saurabh Verma

Reputation: 6728

Bootstrap Navtabs as Buttons

I'm new to js/bootstrap and am reading about it from the official website. I'm having problem with the nav-tabs. In the official example, they are taking the user to some other url, like this:

<ul class="nav nav-tabs">
       <li class="active"><a href="#">Search</a></li>
       <li><a href="">Click</a></li>
        <li><a href="">Play</a></li>
       <li><a href="">Hours Viewed</a></li>
</ul>

But my requirement is to call some js method on click on these tabs. Is it possible using nav-tabs ? or do I have to use buttons ?

Upvotes: 0

Views: 50

Answers (3)

Wenbing Li
Wenbing Li

Reputation: 12982

You can use bootstrap javascript. And this one is about tab.

Here is a sample code:

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Upvotes: 0

Naveed Butt
Naveed Butt

Reputation: 2901

The simplest way I can think of is to add an onclick attribute for each <a> tag...

Maybe something like this...

<ul class="nav nav-tabs">
       <li><a onclick="clickFirst();" href="#">Click</a></li>
       <li><a onclick="clickSecond();" href="#">Play</a></li>
       <li><a onclick="clickThird();" href="#">Hours Viewed</a></li>
</ul>

and add this in your script tag...

function clickFirst() {
    alert('First anchor clicked...');
}

function clickSecond() {
    alert('Second anchor clicked...');
}

function clickThird() {
    alert('Third anchor clicked...');
}

Upvotes: 1

ylerjen
ylerjen

Reputation: 4249

You can change the native comportement of the <a> with JS. For example, if you set something like this, the link will execute your doSomething function but not link you to another page :

<a href="javascript:void(0)" onclick="doSomething()">click me</a>

To go further, if you want to better separate the JS and the HTML (good practice), avoid the inline-javascript and prefer the use of listener : https://developer.mozilla.org/fr/docs/DOM/element.addEventListener

Upvotes: 1

Related Questions