如何为引导选项卡提供外部链接

时间:2014-09-11 10:00:38

标签: asp.net-mvc twitter-bootstrap bootstrap-tabs

我在ASP.NET MVC项目中使用引导选项卡。在此选项卡中,我需要提供外部链接,因此当用户单击特定选项卡时,它将重定向到特定链接。

基本上我有四个控制器。现在,当用户单击选项卡时,我需要重定向到每个控制器。

以下是我尝试使用的代码,但它无效:

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

更新

如果我们删除data-toggle =“tab”,那么它将松开标签功能。我的意思是当我点击标签时,它会加载页面并重定向。所以我的问题是,我们可以重定向到其他控制器而不加载我们现在正在做的页面并使其像tab一样工作吗?

1 个答案:

答案 0 :(得分:6)

只需删除data-toggle="tab"属性,它就会按预期工作。

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>