我正在尝试使用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>
答案 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')