时间戳

首页 > 解决方案 > 我需要使用活动类突出显示单击的导航栏

javascript - 我需要使用活动类突出显示单击的导航栏

问题描述

这是我的导航栏代码：

<div class="navbar-collapse offcanvas-collapse justify-content-md-center" id="navbarsExampleDefault">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="@Url.Action(" DashBoard ","Admin ")">Dashboard</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="@Url.Action(" SectionsList ","Admin ")">Sections</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="@Url.Action(" DifficultyList ","Admin ")">Difficulty</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="@Url.Action(" QuestionsList ","Admin ")">Questions</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="@Url.Action(" AssessmentList ","Admin ")">Assessments</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="@Url.Action(" UsersList ","Admin ")">User's</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Students</a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="nav-link" href="@Url.Action(" StudentResult ","Admin ")">Student Results</a>
      </div>
    </li>
  </ul>
</div>

这是我的点击功能：

$("#navbarsExampleDefault li a").click(function() {
    $(this).parent().addClass('active').siblings().removeClass('active');
});

我需要使用活动类突出显示选定的导航栏。我试过这个但不工作

public ActionResult SectionsList()
 {
  return view();
}

这是我的行动方法之一

标签： javascriptc#jquerymodel-view-controllernavbar

解决方案

var change = function () {
    var url = window.location.pathname;        
    $('ul.navbar-nav a[href="' + url + '"]').parent().addClass('active');        
};
change();

将此函数加载到每个页面通用的js文件中，并从li中删除活动类。即使页面重新加载也可以工作。

我希望这个对你有用！谢谢！

推荐阅读