Clever Geek Handbook

How to provide an external link to bootstrap tabs

I am using bootstrap bookmarks in my ASP.NET MVC project. In this tab, I need to provide an external link, so when users click on a specific tab, it is redirected to a specific link.

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

Below is the code I tried to use but it doesn't work:

<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 lose tab functionality. I mean when I click on a tab it loads the page and redirects. So my question is, can we redirect to another controller without loading the page like what we are doing now and make it work like a tab?

+3


source to share


1 answer


Just remove the attribute data-toggle="tab"

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>
+6


source






More articles:


All Articles