jquery - 带有 jquery 下拉菜单的选项卡式内容

Question

我正在尝试创建一个包含选项卡式内容的页面。几个选项卡有下拉菜单。我正在用没有 href 的 li 创建它。当我将鼠标悬停在 li 元素上时突出显示它们仅在加载页面后的第一个实例中发生。之后页面的行为有所不同 - 不在悬停时呈现突出显示。任何人都可以提出任何补救措施吗？

代码如下:HTML:

<ul class="tabs">
    <li data-content="first" class="tab-link">First Tab</li>
    <li class="submenu-container"> First Dropdown
        <ul class="dropdown">
            <li data-content="second" class="tab-link">Second Tab</li>
            <li data-content="third" class="tab-link">Third Tab</li>
        </ul>
    </li>
    <li class="submenu-container"> Second Dropdown
        <ul class="dropdown">
            <li data-content="fourth" class="tab-link">Fourth Tab</li>
            <li data-content="fifth" class="tab-link">Fifth Tab</li>
            <li data-content="sixth" class="tab-link">Sixth Tab</li>
        </ul>
    </li>
    <li data-content="seventh" class="tab-link">Seventh Tab</li>
</ul>

<br>
<br>
<br>
<br>

<div class="selected" id="first">Contents of First Tab</div>
<div class="hidden" id="second">Contents of Second Tab</div>
<div class="hidden" id="third">Contents of Third Tab</div>
<div class="hidden" id="fourth">Contents of Fourth Tab</div>
<div class="hidden" id="fifth">Contents of Fifth Tab</div>
<div class="hidden" id="sixth">Contents of Sixth Tab</div>
<div class="hidden" id="seventh">Contents of Seventh Tab</div>

<script type="text/javascript">

    //$('li[data-content="first"').css({'background-color':'lightgrey'});    //This line keeps the first tab highlighted when the page is being loded 

    $(document).ready(function() {

    $('li[data-content="first"').css({'background-color':'lightgrey','margin-bottom' : '-2px'}); //This line keeps the first tab highlighted when the page is being loded 



    $('li').on('click', function(e) {

        //////first few lines control the change of color of the selected tab///////

        //removing the previous selected menu state
        $('li').css({'background-color':'#b2b2ff'});

         //is this element from the second level menu?
        if($(this).closest('ul').hasClass('dropdown')){
             $(this).parents('li').css({'background-color':'lightgrey' ,'margin-bottom' : '-2px'});


        //this is a parent element
        }else{
             $(this).css({'background-color':'lightgrey' ,'margin-bottom' : '-2px'});
        }

        /////////////code for controlling change of color of selected tab ends here ///////
        ///////////////////////////////////////////////////////////////////////////////////

        if ($(this).hasClass('submenu-container')) { //prevents any action when any of the top level menus having submenus is clicked
            e.preventDefault();
            return false;
        }

        if ($(this).parents().find('li').hasClass('submenu-container')){ //selects appropriate div element having content 
                                                                         //relevant to the menu selected    

            var data_content = $(this).attr('data-content');

                $('div').each(function(){
                        if($(this).attr('id') == data_content) {
                            $(this).addClass('selected');
                            }
                        else 
                            {
                            $(this).removeClass('selected');
                            $(this).addClass('hidden');
                        }

                    });

                e.preventDefault();
                return false;
            }

    }); //End $('li').on('click')

}); //End $(document).ready()

CSS 是:

.tabs {
list-style-type: none;
margin-bottom: 0;
}

.tabs > li {
float: left;
margin: 1px;
height: 40px;
text-align: center;
line-height: 250%;
padding: 7px;
background-color: #b2b2ff;
}

.tabs > li:hover {
background-color:#e5e5ff;
}

.dropdown {
display: none;
}

.tabs >li:hover > ul.dropdown {
list-style-type: none;
top: 7px;
left: -47px;    
position: relative;
display: block;
}

.tabs >li:hover > ul > li {
background-color: #b2b2ff;
z-index: 100;
padding: 7px;
}

ul.dropdown > li:hover {
background-color:#e5e5ff;
}


div {
padding: 100px;
}

.hidden {

clear: both;
display: none;

}

.selected {
clear: both;
display: block;
margin-top: -20px;
padding-left: 50px;
z-index: 0;
background-color: lightgrey;
height: 500px;
}

谢谢大家

Answer 1

快速而肮脏的解决方法是设置:

.tabs > li:hover {
    background-color:#e5e5ff!important;
}

因为在点击时您使用 jQuery 设置了内联背景颜色 CSS。

你可以在这里测试https://jsfiddle.net/L3ead1u8/

更新

还有一个解决方案是像这样使用 jQuery

//removing the previous selected menu state
$('li').css({'background-color':''});
$(this).css({'background-color':'#b2b2ff'});

在这里测试https://jsfiddle.net/L3ead1u8/1/