单击导航栏

Question

我对MVC，JavaScript或Bootstrap没有太多了解。但在这里，我被困在所有三个方面。我有一个Layout页面，其中包含使用Bootstrap设置样式的导航栏。从here获取的想法。下面给出标记。

<div id="innerTab">
  <ul class="nav nav-pills">
    <li class="active">
      <a href="@Url.Action(" Index ", "Home ")" data-toggle="tab">Index</a>
    </li>
    <li>
      <a href="@Url.Action(" About ", "Home ")" data-toggle="tab">About</a>
    </li>
  </ul>

  <div class="tab-content clearfix">
    <div class="tab-pane active">
      @RenderBody()
    </div>
  </div>
</div>

由于这是Layout View，我希望能够从标签内容区域中的其他视图加载内容。因此，我必须使用不能被多次调用的@RenderBody()。我不确定data-toggle究竟做了什么，但点击About没有任何影响。然后我意识到我必须通过active在点击的标签上手动设置JS课程。所以这就是我所做的。

$(".nav li").on("click", function() {
  $(".nav li").removeClass("active");
  $(this).tab('show');
})

现在，所选标签确实变为活动状态。但是，由于某些未知原因，点击About时，它不会导航到About页面，而是保持在Index。因此，我必须将其更改为@Html.ActionLink，如下所示。

@Html.ActionLink("About", "About", "Home")

这已成功导航到About页面。但是，About标签会在一秒钟内变为活动状态并快速切换到Index标签，但会显示About页面中的内容。如下。

思考添加data-toggle会解决这个问题。所以我按照here给出了答案。

@Html.ActionLink("About", "About", "Home", new { data_toggle="tab"})

然后它回到原点。除了突出我选择的标签这一事实，它什么也没做。我迷路了!!我哪里错了？

Answer 1

首先，@Url.Action(" Index ", "Home ")无效，因为您的Action和Controller参数周围有额外的空格。

应为@Url.Action("Index", "Home")

“关于标签变为活动状态一秒钟并快速切换到索引”

这是因为，点击后，jQuery click事件会添加一个类。但MVC会重定向到新页面，_Layout会再次使用默认的active标签Home进行呈现。

所以到About.cshtml的顶部，

@{
    ViewBag.Title = "About";
    ViewBag.ActiveNav = "About"; // you'll need to add this to Home as well
}

然后将布局更改为：

  <ul class="nav nav-pills">

   //Based on the "ActiveNav" value, "active" class will be added

    <li class="@(ViewBag.ActiveNav == "Home" ? "active" : "")">
      @Html.ActionLink("Index", "Index", "Home")
    </li>
    <li class="@(ViewBag.ActiveNav == "About" ? "active" : "")">
      @Html.ActionLink("About", "About", "Home")
    </li>
  </ul>

现在active类已根据页面添加到特定li。