因为导航的颜色对特定图片难以辨认，我希望它能够针对特定页面进行更改。这是HTML：
<div id='nav'>
<ul>
<li id='navBiog'><a href="javascript:void(0)" onclick="imageChange(1, 400)" class="navItem">biography</a></li>
<li id='navConductor'><a href="javascript:void(0)" onclick="imageChange(2, 400)" class="navItem">conductor</a></li>
<li id='navOrchestrator'><a href="javascript:void(0)" onclick="imageChange(3, 400)" class="navItem">orchestrator</a></li>
<li id='navGallery'><a href="javascript:void(0)" onclick="imageChange(4, 400)" class="navItem">gallery</a></li>
<li id='navContact'><a href="javascript:void(0)" onclick="imageChange(5, 400)" class="navItem">contact</a></li>
</ul>
</div>
CSS
a.navItem:link,a.navItem:visited{
font-family:"Helvetica", "Arial", sans-serif;
font-size:20px;
text-align:right;
padding:4px 6px 4px 6px;
text-decoration:none;
color:#333;
transition:color 1s;
-moz-transition:color 1s; /* Firefox 4 */
-webkit-transition:color 1s; /* Safari and Chrome */
-o-transition:color 1s; /* Opera */
}
#navBiog a.navItem:hover,a:active {color:#cc0099;}
#navConductor a.navItem:hover,a:active {color:#ff9900;}
#navOrchestrator a.navItem:hover,a:active {color:#66cc66;}
#navGallery a.navItem:hover,a.navItem:active {color:#6699ff;}
#navContact a.navItem:hover,a.navItem:active {color:#FF0;}
和jQuery
switch (i)
{
case 0:
$('.content').fadeOut(500);
$('a.navItem:link').animate({color: "#333"});
$('#navBiog a.navItem:hover,a:active',
'#navConductor a.navItem:hover,a:active',
'#navOrchestrator a.navItem:hover,a:active',
'#navGallery a.navItem:hover,a:active',
'#navContact a.navItem:hover,a:active').css({'color': ''});
break;
case 1:
$('.content').slideUp(700);
$('#biogContent').slideDown(700, function(){
$('h1').animate({color: "#cc0099"});
$('a.navItem:link').animate({color: "#333"});
$('#navBiog a.navItem:hover,a:active',
'#navConductor a.navItem:hover,a:active',
'#navOrchestrator a.navItem:hover,a:active',
'#navGallery a.navItem:hover,a:active',
'#navContact a.navItem:hover,a:active').css({'color': ''});
});
break;
case 2:
$('.content').slideUp(700);
$('#condContent').slideDown(700, function(){
$('h1').animate({color: "#ff9900"});
$('a.navItem:link').animate({color: "#333"});
$('#navBiog a.navItem:hover,a:active',
'#navConductor a.navItem:hover,a:active',
'#navOrchestrator a.navItem:hover,a:active',
'#navGallery a.navItem:hover,a:active',
'#navContact a.navItem:hover,a:active').css({'color': ''});
});
break;
case 3:
$('.content').slideUp(700);
$('#orchContent').slideDown(700, function(){
$('h1').animate({color: "#66cc66"});
$('a.navItem:link').animate({color: "#ffffff"});
$('#navBiog a.navItem:hover,a:active',
'#navConductor a.navItem:hover,a:active',
'#navOrchestrator a.navItem:hover,a:active',
'#navGallery a.navItem:hover,a:active',
'#navContact a.navItem:hover,a:active').css({'color': ''});
});
break;
case 4:
$('.content').slideUp(700);
$('#mediaContent').slideDown(700, function(){
$('h1').animate({color: "#6699ff"});
$('a.navItem:link').animate({color: "#333"});
$('#navBiog a.navItem:hover,a:active',
'#navConductor a.navItem:hover,a:active',
'#navOrchestrator a.navItem:hover,a:active',
'#navGallery a.navItem:hover,a:active',
'#navContact a.navItem:hover,a:active').css({'color': ''});
});
break;
case 5:
$('.content').slideUp(700);
$('#contactContent').slideDown(700, function(){
$('h1').animate({color: "#ff0"});
$('a.navItem:link').animate({color: "#333"});
$('#navBiog a.navItem:hover,a:active',
'#navConductor a.navItem:hover,a:active',
'#navOrchestrator a.navItem:hover,a:active',
'#navGallery a.navItem:hover,a:active',
'#navContact a.navItem:hover,a:active').css({'color': ''});
});
break;
default:
break;
}
对于大量的代码感到抱歉，但是很难说出来。无论如何，最初的颜色变化是有效的，但是悬停不起作用 - 显然，由于导航中的每个链接在悬停时都是不同的颜色，这很复杂...
如果这是一个非常愚蠢的问题/被问过一千次而且我找不到它，那么请提前感谢并真诚地道歉。
答案 0 :(得分：0)
＆lt; - 更新TUT INCLUDE - ＆gt;
以下只是来自fiddle的代码，其中包含有关每件作品如何运作的完整评论，以便其他看到此内容的人可以“了解”实际发生的事情。
$(function() {
// Your array of colors to use as "hover over" color of each link
// keep in mind, for this to work properly, the number of colors should match the number of links &
// their index's should match respectivly (exp. link # 1 will = array[0] as it is the first item in the array)
var araCss = new Array( "#cc0099", "#ff9900", "#66cc66", "#6699ff", "#FF0" );
// Also remember there are several different ways to do this,
// for instance you could simply create an attribute in the link named "hoverColor" &
// have it equal the link color you want, like: <li hoverColor="#cc0099">...
// after that, on the hoverin you could easily get your hover color from $(this).attr("hoverColor")
// The following will begin cycling through each list item in the list in order to add the functionality you want
$("li").each(function(i) {
// Here we first add the hoverin/hoverout functions to be called
$(this).hover(function(eIn) {
// For hover in, animate this element to the color desired for this li
$(this).children("a").animate({ color: araCss[i] });
},
function(eOut) {
// for hover out, animate this li to the base color desired
$(this).children("a").animate({ color: "#333" });
}) // do not place ; as it will end the line for $(this) and we simply want to continue on
// Here we make the call to the link inside each li, as you can see,
// jQuery makes it very easy to go from element to the next without need of a recall,
// since .hover returns the element is was placed on
.children("a").click(function(eClk)
{
// Do some work when clicking on link! // The following will make the link Blink
setTimeout(function() { $(this).fadeOut("2000", function(){ $(this).fadeIn("2000") }); }, 10);
switch(i) // 0 based off of var i from .each function, thus you can manipulate your content with different link clicks here
{
case 0: // biography
// content fade out
break;
case 1: // conductor
// content slide up
break;
case 2: // orchestrator
// content slide down
$(this).addClass('color-white').mouseleave(function() { $(this).removeClass("color-white") });
break;
case 3: // gallery
// content slide up
break;
case 4: // contact
// content slide down
break;
}
});
});
});
＆lt; - UPDATE - ＆gt;
抱歉这个漫长的周末，意味着尽快回答。除了个人生活之外，我还为你提供了一个如何简化你想要做的事情的主要例子。请记住，当使用像jQuery这样的lib时，不要那么努力让东西做你想做的事情。帮助编写lib的人已经完成了所有艰苦的工作，所有你需要做的就是把它绑在一起。
试试我的小提琴，我想你会明白我的意思。
http://jsfiddle.net/SpYk3/WXYHb/
正如您将看到的，所有形式的代码都更加宽松，并且可以实现与代码相同的目的，而不会发生任何事件并且支持jQuery跨浏览器。享受！
＆lt; - OLD - ＆gt; 只是一点建议。而不是制作一个巨大的javascript代码来改变单个部分，为什么不通过编写一个css类来更好地利用jQuery，JQueryUI和Css样式。 换句话说，停止尝试jQuery已经完成的所有艰苦工作。如果你想让一些元素具有特定的css，那么将该特定的css写入类，如： .make-me-black {color：＃000} 然后只需addClass，或toggleClass，甚至switchClass即可根据需要更改元素颜色
有关详细信息，请查看以下链接：
这不一定直接回答问题（即直接的例子），但是我要开会，当我回来的时候，我会举例说明如何在ALOT中做你想要做的事情。代码行，具有更多的可用性和访问权限