Question

将.Net MVC5与Bootstrap3一起使用如何在保留data-toggle="tabs"的同时将我的选项卡子菜单重定向到不同的视图？

我正在尝试使用带有子菜单的顶级菜单并保留数据切换功能，以便显示您所使用的标签。

如果我从子菜单部分删除data-toggle="tabs"，则重定向工作正常，但我无法显示您所使用的标签。

如果有更好的方法，请告诉我。

<ul class="nav nav-tabs" id="myTab">
    <li><a href="#one" data-toggle="tab">Menu 1</a>
    </li>
    <li><a href="#two" data-toggle="tab">Menu 2</a>
    </li>
    <li><a href="#three" data-toggle="tab">Menu 3</a>
    </li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in" id="one">
        <div class="navbar navbar-default">
            <ul class="nav nav-pills">
                <li><a href="/Home/About" data-toggle="tab">One SubMenu 1</a>
                </li>
                <li><a href="/Home/About" data-toggle="tab">One SubMenu 2</a>
                </li>
                <li><a href="/Home/About" data-toggle="tab">One SubMenu 3</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="tab-pane fade in" id="two">
        <div class="navbar navbar-default">
            <ul class="nav nav-pills">
                <li><a href="/Home/About" data-toggle="tab">Two SubMenu 1</a>
                </li>
                <li><a href="/Home/About" data-toggle="tab">Two SubMenu 2</a>
                </li>
                <li><a href="/Home/About" data-toggle="tab">Two SubMenu 3</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="tab-pane fade in" id="three">
        <div class="navbar navbar-default">
            <ul class="nav nav-pills">
                <li><a href="/Home/About" data-toggle="tab">Three SubMenu 1</a>
                </li>
                <li><a href="/Home/About" data-toggle="tab">Three SubMenu 2</a>
                </li>
                <li><a href="/Home/About" data-toggle="tab">Three SubMenu 3</a>
                </li>
            </ul>
        </div>
    </div>
</div>

这是jquery错误的方式。

第1864行，http://localhost:34607/Scripts/jquery-1.10.2.js
中第2列的未处理异常
0x800a139e - JavaScript运行时错误：语法错误，无法识别的表达式：/ Home / About

Answer 1

我遇到了同样的问题并通过向我的ViewModel添加自定义字段来解决这个问题，该ViewModel具有活动标签页。

<ul class="nav nav-tabs tabs">
<li @(Model.ViewMode == 1 ? "class=active" : "")>@Html.ActionLink("Item1", "List", new { viewMode = 1 })</li>
<li @(Model.ViewMode == 2 ? "class=active" : "")>@Html.ActionLink("Item2", "List", new { viewMode = 2 })</li>
<li @(Model.ViewMode == 3 ? "class=active" : "")>@Html.ActionLink("Item3", "List", new { viewMode = 3 })</li>
</ul>

Twitter-Bootstrap-3选项卡数据切换href重定向

1 个答案: