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 INCLUDE を更新 -->

以下は、フィドルからのコードであり、各部分がどのように機能するかについての完全なコメントが含まれているため、これを見た他の人は実際に何が起こっているのかを「学ぶ」ことができます.

$(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 を次のようなクラスに記述します。要求する

詳細については、次のリンクを参照してください。

これは必ずしも質問に直接答えるとは限りません（つまり、直接的な例）が、会議に行く必要があります。戻ったら、コード行を大幅に減らして、あなたがやろうとしていることを実行する方法の例をjsfiddleします使いやすさとアクセスが大幅に向上

于 2012-01-13T17:52:45.650 に答える