如何使用 jquery 激活侧边栏菜单？

Posted 2023-02-24

【中文标题】如何使用 jquery 激活侧边栏菜单？

【英文标题】：How to active sidebar menu using jquery?

【发布时间】：2018-07-29 16:45:06

【问题描述】：

我正在尝试使用 jQuery 为侧边栏菜单在活动菜单项上设置一个类。我不知道如何使用 jQuery 使用活动类。这是我的侧边栏菜单代码：

<div class="leftside-navigation">
  <ul class="sidebar-menu" id="nav-accordion">
    <li>
      <a class="mnb active" href="index.php">
        <i class="fa fa-dashboard"></i>
        <span>Dashboard</span>
      </a>
    </li>
    <li class="sub-menu">
      <a href="javascript:;">
        <i class="fa fa-book"></i>
        <span>Applied Loan</span>
      </a>
      <ul class="sub">
        <li><a class="mnb" href="loan_edu.php">Education</a></li>
        <li><a class="mnb" href="loan_med.php">Medical</a></li>
        <li><a class="mnb" href="loan_othr.php">Other</a></li>
      </ul>
    </li>
    <li class="sub-menu">
      <a href="javascript:;">
        <i class="fa fa-book"></i>
        <span>Approved Loan</span>
      </a>
      <ul class="sub">
        <li><a href="aprove_edu.php">Education</a></li>
        <li><a href="aprove_med.php">Medical</a></li>
        <li><a href="aprove_othr.php">Other</a></li>
      </ul>
    </li>
  </ul>
</div>

【参考方案1】：

通过使用jquery:

var url =window.location;
$('#leftside-navigation a[href="' + url + '"]').addClass('active')

【参考方案2】：

我认为您在以前的答案中有一个如何使用 jQuery 进行设置的示例。如果您需要使用 PHP 进行检查，我认为这可能会对您有所帮助。

1) 在包含 header.php 或 menu.php 之前，在您的页面中声明一个变量（例如：aboutus.php、cotactus.php），无论您的导航标记位于哪个文件中。

 <?php
 $page = 'aboutus';
 include('header.php');
 ?>

2) 现在，在 header.php 中，您读取此变量的值以确定正在查看的页面，并相应地为其导航链接分配不同/附加的 CSS 样式。

   <ul class="mainmenu" >
      <li class="menuitem <?php if($page=='aboutus')echo 'active';?>" >
        <a href="aboutus.php"><span>About Us</span></a>
      </li>
      <li class="menuitem <?php if($page=='contactus')echo 'active';?>" >
        <a href="contactus.php"><span>Contact Us</span></a>
      </li>  
   </ul>

希望对你有帮助……

【参考方案3】：

看看这个链接 - https://codepen.io/arjunamgain/pen/lGALt

这是 jQuery 部分：

$(document).ready(function()
  $('ul li a').click(function()
    $('li a').removeClass("active");
    $(this).addClass("active");
  );
);

【讨论】：

此侧边栏分隔 php 文件并使用 php include() 包含每个页面。我把你的脚本放在每一页，但没有工作。

我不知道我是否理解正确，但请查看此链接：***.com/questions/2913415/…

【参考方案4】：

对于链接的每个元素，为click 添加事件侦听器，删除所有活动类，并将当前a 设置为活动：

$('a').click(function()
  $('a.active').each(function()
    $(this).removeClass('active');
  );
  $(this).addClass('active');
);

.active
  color: red;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="leftside-navigation">
  <ul class="sidebar-menu" id="nav-accordion">
    <li>
      <a class="mnb active" href="index.php">
        <i class="fa fa-dashboard"></i>
        <span>Dashboard</span>
      </a>
    </li>
    <li class="sub-menu">
      <a href="javascript:;">
        <i class="fa fa-book"></i>
        <span>Applied Loan</span>
      </a>
      <ul class="sub">
        <li><a class="mnb" href="loan_edu.php">Education</a></li>
        <li><a class="mnb" href="loan_med.php">Medical</a></li>
        <li><a class="mnb" href="loan_othr.php">Other</a></li>
      </ul>
    </li>
    <li class="sub-menu">
      <a href="javascript:;">
        <i class="fa fa-book"></i>
        <span>Approved Loan</span>
      </a>
      <ul class="sub">
        <li><a href="aprove_edu.php">Education</a></li>
        <li><a href="aprove_med.php">Medical</a></li>
        <li><a href="aprove_othr.php">Other</a></li>
      </ul>
    </li>
  </ul>
</div>