如何给外部链接到引导选项卡 [英] How to give external link to bootstrap tabs

问题描述

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

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>

更新：

如果我们删除data-toggle = tab，那么它将失去Tab功能。我的意思是，当我单击选项卡时，它会加载页面并重定向。所以我的问题是，是否可以像现在一样加载页面而不重定向到其他控制器，并使它像Tab一样工作？

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?

推荐答案

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

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

< a href = http://fiddle.jshell.net/5w09kLwf/show/ rel = noreferrer>演示

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

这篇关于如何给外部链接到引导选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！