0

因为导航的颜色在特定图片上难以辨认，所以我希望它针对特定页面进行更改。这是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;
                        }

很抱歉有大量的代码，但很难用语言表达。无论如何，初始颜色更改有效，但悬停不起作用 - 显然这很复杂，因为导航中的每个链接在悬停时都是不同的颜色......

非常感谢您，如果这是一个非常愚蠢的问题/被问了一千次但我找不到它，我们深表歉意。

4

1 回答 1

0

<-- 更新 TUT 包括 -->

以下只是来自小提琴的代码，其中包含关于每件作品如何工作的完整评论，以便其他看到此内容的人可以“了解”实际发生的事情。

$(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;
            }
        });
    });
});

<-- 更新-->

抱歉，长周末，打算早点回答。撇开个人生活不谈，我给你做了一个关于如何简化你正在尝试做的事情的主要例子。尽量记住，当使用像 jQuery 这样的库时，不要那么努力地让东西做你想做的事。帮助编写 lib 的人已经完成了所有艰苦的工作，您所要做的就是将它们捆绑在一起。

试试我的小提琴，我想你会明白我的意思。

http://jsfiddle.net/SpYk3/WXYHb/

正如您将看到的，所有形式的代码都更加宽松，并且执行与您的代码相同的目的，没有任何意外，并且具有 jQuery 跨浏览器支持。享受！

<-- 旧--> 只是一点建议。与其编写大量的 JavaScript 代码来更改各个部分，不如通过编写一个 CSS 类来更好地利用 jQuery、JQueryUI 和 Css 样式。换句话说，不要再尝试 jQuery 已经完成的所有艰苦工作了。如果您希望一些元素具有特定的 css，则将该特定 css 写入一个类，例如： .make-me-black { color: #000 } 然后只需 addClass 或 toggleClass 甚至 switchClass 随意更改该元素的颜色要求

有关更多信息，请查看以下链接：

这不一定直接回答问题（即直接示例），但是我有一个会议要参加，当我回来时，我将举一个例子，说明如何用更少的代码行来做你想做的事情并且具有更多的可用性和访问权限

于 2012-01-13T17:52:45.650 回答