Question

Because the colour of the nav was illegible against a particular picture, I want it to change for one particular page. Here is the 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;}

And j Query

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;
                        }

处理大量法典问题,但很难说几句。最初的彩色改变工程,但电线并不多,这显然因为幼苗的每一个环节都不同颜色。

如果这是一个令人厌恶的 question问/问题,那么事先和真诚地感谢你,我只是找不到。

Answer 1

<--UPDATE TUT INCLUDE ->

下面是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;
            }
        });
    });
});

<--UPDATE ->

长时间的周末,人们担心会很快解答。除了个人生活之外,我给你一个快速的dle子,说明如何简化你试图做的工作。想到的是,在使用像 j一样的平衡时,不做太强的工作来做你想要的事情。帮助书写字句的一些人已经做了所有辛勤工作,你们都必须这样做。

Try my fiddle and I think you will see what I mean.

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

如你所看到的那样,所有形式的法典都更加松.,预示着你的法典的同样目的,没有发生任何事件,也没有获得“高档”交叉浏览器的支持。欢乐!

<-- OLD --> Just a bit of advice. Rather than make a huge javascript code to change individual parts, why not make better use of jQuery, JQueryUI and Css styling by writting a css class. In other words, stop trying to do all the hard work jQuery has already done. if you want a few elements to have specific css then write that specific css into a class like: .make-me-black { color: #000 } Then just addClass, or toggleClass, or even switchClass at will to change that elements color on demand

详情查询:

(allows to animate the toggling of 2 classes) http://jqueryui.com/docs/switchClass/
(toggles between 2 classes) http://api.jquery.com/toggleClass/
(Adds a class to a jQuery object) http://api.jquery.com/addClass/
(Removes a class from a jQuery object) http://api.jquery.com/removeClass/

这必然会直接回答这个问题(即直接例子),但我会开会,当我回头回击时,我会 j笑一个例子,说明你如何在《拉塔条约》中做些什么,在法典的较次要方面,以及更可使用和更容易获得。

友情链接