[英]How to say with variables: If this id matches this class don't do this
In words, I want to say, If the body Id is not equal to a list item's class execute the following function, I have tried to get the code right but nothing seems to work. 换句话说,我想说的是,如果正文ID不等于列表项的类,请执行以下功能,我试图使代码正确,但似乎无济于事。
I have 4 pages each with an ID to make the active state work in a css sprite that work great. 我有4个页面,每个页面都有一个ID,以使活动状态在CSS精灵中正常工作。 On top of that I added between normal and hover a jquery opacity effect but the problem is that when I hover the active state It also changes to hover and I want the active sprite to stay put when hover, anyhelp would be appreciated, Saludos.
最重要的是,我在普通和悬停之间添加了一个jQuery不透明效果,但是问题是,当我悬停活动状态时,它也会变为悬停状态,并且我希望活动小精灵在悬停时保持原状,所以不胜感激,Saludos。
Html: HTML:
<ul id="nav">
<li class="home"><a href="index.html" title="Home Page">Home</a></li>
<li class="portfolio"><a href="portfolio.html" title="Portfolio Page">Portfolio</a></li>
<li class="contact"><a href="contact.html" title="Contact Form Page">Contact</a></li>
<li class="about"><a href="about.html" title="About me Page">About me</a></li>
</ul>
Jquery: jQuery:
$(document).ready(function(){
// Get the ID of the body
var parentID = $("body").attr("id");
// Loop through the nav list items
$("#nav li").each(function() {
// compare IDs of the body and class of list-items
var myClass = $(this).attr("class");
// only perform the change on hover if the IDs don't match (so the active link doesn't change on hover)
if (myClass != "n-" + parentID) {
// Opacity effect between states
$('ul#nav li a').removeClass('hover');
$("ul#nav li a").wrapInner("<span></span>");
$("ul#nav li a span").css({"opacity" : 0});
$("ul#nav li a").hover(function(){
$(this).children("span").stop().animate({"opacity" : 1}, 500);
}, function(){
$(this).children("span").stop().animate({"opacity" : 0}, 500);
});
}
});
});
I'm not sure why you're checking for <li>
s whose class is not 'n- parentId
'. 我不确定为什么要检查类不是'n-
parentId
'的<li>
。 Don't you just want those whose classes are not the same as the body's ID? 难道你只是想那些类是不一样的身体的ID?
Restrict the <li>
selector to only exclude the class you don't want: 限制
<li>
选择器,使其仅排除不需要的类:
$(document).ready(function(){
// Get the ID of the body
var parentId = $("body").attr("id");
// Loop through the nav list items
$("#nav li[class!=" + parentId + "]").each(function(){
// Opacity effect between states
$('ul#nav li a').removeClass('hover');
$("ul#nav li a").wrapInner("<span></span>");
$("ul#nav li a span").css({"opacity" : 0});
$("ul#nav li a").hover(function(){
$(this).children("span").stop().animate({"opacity" : 1}, 500);
}, function(){
$(this).children("span").stop().animate({"opacity" : 0}, 500);
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.