[英]how do i add an active class on the parent li when i select an item on it. using javascript
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/") + 1);
$("#nav ul li a").each(function() {
if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
$(this).addClass("active");
});
});
here is the js that I am using to put active class on the li. 这里是我用来在li上放置活动类的js。 it works fine, but when I am selecting an item (the child) inside my sorta like dropdown list. 它工作正常,但是当我在下拉列表之类的排序中选择一个项目(孩子)时。 it will get an active class, but i also want the parent li to get an active class also. 它会得到一个活跃的类,但我也希望父李也得到一个活跃的类。
<%@include file="header.jsp"%>
<div id="nav">
<ul>
<li class="headerFont"><a href="index.jsp"><b>HOME</b></a></li>
<li class="headerFont"><a href="link.jsp"><b>HOW TO
DONATE</b></a></li>
<li class="headerFont"><a class="tangina" href="#"><b>DONATE</b></a>
<ul>
<li class="headerFont"><a href="link2.jsp"><b>DONATION
CENTER <img id="arrow" src="img/arrow.png" />
</b></a></li>
<li class="headerFont"><a href="link3.jsp"><b>HOW ELSE
CAN I DONATE? <img id="arrow" src="img/arrow.png" />
</b></a></li>
</ul></li>
<li class="headerFont"><a href="#"><b>GET DONORS</b></a></li>
<li class="headerFont"><a href="#"><b>ABOUT BLOOD</b></a>
<ul>
<li class="headerFont"><a href="Bfacts.jsp"><b>BLOOD
FACTS <img id="arrow" src="img/arrow.png" />
</b></a></li>
<li class="headerFont"><a href="news.jsp"><b>NEWS <img
id="arrow" src="img/arrow.png" /></b></a></li>
<li class="headerFont"><a href="faqs.jsp"><b>FAQS <img
id="arrow" src="img/arrow.png" /></b></a></li>
</ul></li>
<li class="headerFont"><a href="about.jsp"><b>ABOUT US</b></a></li>
<li class="headerFont"><a href="login.jsp"><b>LOG IN</b></a>
<ul>
<li class="headerFont"><a href="#"><b>REGISTER <img
id="arrow" src="img/arrow.png" /></b></a></li>
</ul></li>
</ul>
</div>
<div class="triangle"></div>
<div class="triangle2"></div>
Change this line 改变这一行
$(this).addClass("active");
to 至
$(this).closest('li').addClass('active');
The closest
operator tells jQuery to look for the nearest li
in the DOM tree. closest
运算符告诉jQuery在DOM树中查找最近的li
。 In this case, the nearest parent. 在这种情况下,最近的父。
href
string slicing method: 一个更好的href
字符串切片方法: ** Here's a fiddle ** 这是一个小提琴
And here's a better ( read: more accurate ) string slicing function: 这里有一个更好的( 读取:更准确 )字符串切片功能:
/* start of code...*/
var pgurl = sliceString(window.location.href);
/*... rest of code */
function sliceString(s) {
s = s.split("").reverse().join("");
if (s.indexOf('/') === 0){
s = s.substring(1);
}
s = s.substring(0, s.indexOf('/'));
return s.split("").reverse().join("");
}
This will remove any trailing /
character, and more accurately select the end-of-string url you're looking for. 这将删除任何尾随/
字符,并更准确地选择您正在寻找的字符串结尾URL。
Alright, if you want all parents to be selected then you can use the parents()
selector like so: 好吧,如果你想要选择所有父母,那么你可以使用parents()
选择器,如下所示:
$(this).parents('li').addClass('active');
Another fiddle example 另一个小提琴的例子
The third solution I provided does select the li
that has the a
element which was clicked, as well as all its parent li
elements. 我所提供的第三解决方案确实选择li
具有a
其中被点击元件,以及所有它的父li
的元件。 Keep in mind that the top-level li
( headerFont
in your provided example) contains all the child li
items as well, not just the one that was clicked. 请记住,顶级li
(在您提供的示例中为headerFont
)也包含所有子li
项目,而不仅仅是单击的那个。 If you only want the text selected for DONATE
, then add that to your CSS like 如果您只想为DONATE
选择文本,那么将其添加到您的CSS中
nav > ul > li.active b,
nav > ul > li > ul li.active {
/* ACTIVE STYLES */
}
Those two CSS selectors combined will select the top-level b
element in your nav, as well as an non-top-level li
element that was clicked. 这两个CSS选择器的组合将在您的导航中选择顶级b
元素,以及被单击的非顶级li
元素。
$(this).parent().addClass('active');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.