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) 在我的网页中运行良好，但第三个块不是。我不知道为什么会这样。有人能解释一下为什么第三个块不起作用吗？谢谢！

更新 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 回答