How to give external link to bootstrap tabs

Question

I am using bootstrap tabs in my ASP.NET MVC project. In this tab, I need to give external link so when users click on particular tab it will redirect to particular link.

Basically I have four controller. Now I need to redirect to each controller when user clicks on tab.

Below is the code I tried to use but it is not working :

<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
    <li><a href="http://google.com" role="tab" data-toggle="tab">Profile</a></li>
    <li><a href="http://test1.com" role="tab" data-toggle="tab">Messages</a></li>
    <li><a href="http://test2.com" role="tab" data-toggle="tab">Settings</a></li>
</ul>

Update :

If we remove data-toggle="tab", then it will loose tab functionality. I mean when i click on tab, it loads page and redirect. So my question is, can we redirect to other controller without loading page like what we are doing now and make it works like tab?

Answer 1

Just remove the data-toggle="tab" attribute and it will work as you expected.

Demo

<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a>

    </li>
    <li><a href="http://google.com" role="tab">Profile</a>

    </li>
    <li><a href="http://test1.com" role="tab">Messages</a>

    </li>
    <li><a href="http://test2.com" role="tab" data-toggle="tab">Settings</a>

    </li>
</ul>