Question

这是我的导航栏代码：

<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();
}

这是我的操作方法之一

Answer 1

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

将此功能加载到每个页面共有的js文件中，并从li中删除活动的类。即使页面重新加载也可以使用。

希望它对您有用！谢谢！

Answer 2

放置下面经过测试的代码段

$(document).ready(function(){
$(".navbar-nav .nav-link").click(function (e) {
     e.preventDefault();
    $('.nav-item').removeClass('active');
    $(this).closest('.nav-item').addClass('active');
 });
});

Answer 3

请使用以下代码

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

希望它对您有用谢谢！

我需要使用活动班级突出显示单击的导航栏

3 个答案: