4

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?

Monkey Code
  • 592
  • 6
  • 20
Ajay
  • 317
  • 2
  • 12
  • 25

1 Answers1

7

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>
Chamika Sandamal
  • 23,565
  • 5
  • 63
  • 86
  • Hi I just wanted to know one thing. 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? – Ajay Sep 15 '14 at 14:06
  • Hi if you dont mind can you show me for controller in mvc?? I followed your link but not able to redirect to another controller. It is showing parent controller name and followed by link. But in my case, for every tab i need to redirect to other controller but have to make this works like tab. – Ajay Sep 15 '14 at 14:55
  • you cannot redirect, you just can get the content from ajax and load in the tab content. or else you can redirect like in the answer and set the active tab based on url – Chamika Sandamal Sep 15 '14 at 15:02