0

私はこれらのCSSコードを持っています：

    .tabs_inactive {
        border: 1px solid #cccccc;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        background-color: #eeeeee;
        border-bottom: #cccccc;
    }

    .tabs_inactive:hover {
        background-color: #ff8000;
        border-color: #ff8000;
        cursor: pointer;
    }

    /*this does not work*/
    .tabs_inactive:hover a {
        color: #ffffff;
    }

    .tabs_active {
        background-color: #ffffff;
        border-bottom: 2px solid #ffffff;
    }

    .tabs_active:hover{
        background-color: #ffffff;
        border: 1px solid #cccccc;
        border-bottom: 2px solid #ffffff;
        cursor: default;
    }

    .tabs_active:hover a {
        cursor: default;
    }

最後の（.tab_active:hover a）は私のWebページで完全に機能していますが、3番目のブロックは機能していません。なぜこれが起こったのか理解できません。3番目のブロックが機能しない理由を誰かが説明してもらえますか？ありがとう！

更新1：相対的なJavaScriptコードは次のとおりです。

//add class "tabs_inactive" to the original tabs option.
$( "#tabs ul li" ).addClass("tabs_inactive");

//default: set the first tab as the active one.
$( "#tabs ul li" ).first().toggleClass("tabs_active");

//to make sure the style sheet will be changed when click on the inside <a> tag
$( "#tabs ul li a" ).live( "click", function () {
    //close other tabs
    $( this ).parents("ul").children("li").each( function (){
        if( $(this).hasClass("tabs_active")){
            $(this).removeClass("tabs_active");
        }
    });
    $( this ).parent().toggleClass("tabs_active");
    return false;
});
//change the class to "tabs_active" when the tab is clicked
$( "#tabs ul li" ).live( "click", function () {
    //close other tab
    $( this ).parent().children("li").each( function (){
        if( $(this).hasClass("tabs_active")){
            $(this).removeClass("tabs_active");
        }
    });
    $( this ).toggleClass("tabs_active");
});

また、HTMLコード：

        <div id="tabs">
            <ul>
                <li><a href="#homepage">HOME</a> </li>
                <li><a href="#option1">option1</a> </li>
            </ul>
            <div id="homepage">
                <p>
                    HOME:
                    Here is the home page
                </p>
            </div>
            <div id="option1">
                <p>
                    Option1:
                    Here is the tag page 1
                </p>
            </div>
        </div>

そうです、私はタブメニューを実装しようとしていますが、これは実践であるため、元のJqueryUI関数を使用したくありません。誰かが問題が何であるかを知っていますか？ありがとうございました。

4

1 に答える 1

0

申し訳ありませんが、タイプミスなどではありません。#tab ul li a以前にidセレクターを使用していたフォントの色のスタイルを指定したため、関数toggleClassがまったく機能しなくなったのは間違いです。そのタグをidからclassに変換すると、すべてが正常に機能します。みんなありがとう、それは私の悪いことです。

于 2012-11-15T02:02:55.870 に答える