Javascript @在导航栏中单击时，操作不会路由

我对

MVC

、

JavaScript

或

Bootstrap

不太了解。但在这里，我被困在这三个方面的工作中。我有一个

布局

页面，由使用

引导设置样式的导航栏组成。这个想法来源于。下面给出了标记

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

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

现在，所选选项卡已激活。但是，由于某些未知原因，当单击
关于
时，它不会导航到
关于
页面，而是停留在
索引
。因此，我不得不将其更改为
@Html.ActionLink
，如下所示

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

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

这已成功导航到
关于
页面。但是，
关于
选项卡会激活一秒钟，并快速切换到
索引
选项卡，但会显示
关于
页面中的内容。如下图所示


我认为添加
数据切换可以解决这个问题。因此，我遵循给出的答案

然后又回到了原点。除了突出显示我选择的标签外，它什么也不做。我迷路了！！我哪里出错了？
首先，
@Url.Action（“Index”，“Home”）
不起作用，因为在
操作
和
控制器
参数周围有额外的空格

它应该是
@Url.Action（“Index”，“Home”）


“关于”选项卡会激活一秒钟，并快速切换到索引”

这是因为，在单击时，jQuery单击事件会添加一个类。但是MVC重定向到一个新页面，
\u布局
再次呈现，默认的
活动
选项卡
主页

因此，在您的
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>


//根据“ActiveNav”值，将添加“active”类

@ActionLink（“索引”、“索引”、“主页”）


@ActionLink（“关于”、“关于”、“主页”）



现在，
active
类根据页面添加到特定的
li
。
首先删除引导程序的javascript和css——这看起来很糟糕，但暂时忘记它。导航是否加载了您期望的页面？接下来，阅读关于组件的内容，然后重新介绍javascript和css。导航组件应该在没有自定义脚本的情况下工作。@Jasen删除引导程序可以在没有任何问题的情况下启用导航！！所以问题在于我当时处理引导CSS的方式。我知道问题在于类在新页面呈现时被重置！！只是不知道如何修复它。这很有魅力！！达尼亚瓦达加鲁！！：）