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

时间:2018-02-19 12:33:45

标签: jquery html

我正在尝试使用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>

4 个答案:

答案 0 :(得分:0)

对于链接的每个元素,为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>
JOIN

答案 1 :(得分:0)

查看此链接 - public class DigitsLimitValidator implements ConstraintValidator<DigitsLimit, BigInteger> { private int min; private int max; @Override public void initialize(DigitsLimit value) { min = value.min(); max = value.max(); } @Override public boolean isValid(BigInteger value, ConstraintValidatorContext cxt) { return value != null && BigIntegerMath.log10(value, RoundingMode.FLOOR) + 1 >= min && BigIntegerMath.log10(value, RoundingMode.FLOOR) + 1 <= max; } }

这是jQuery部分:

@RedisHash("Foo")
public class Foo implements Serializable {

  @Id
  @DigitsLimit(min = 15, max = 25)
  private BigInteger id;

  @Indexed
  private Status status;
}

答案 2 :(得分:0)

我认为你有一个例子,如何在之前的答案中使用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 :(得分:0)

通过使用jquery

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