Question

我试图制作一个标签菜单，它有一些问题...... 我认为问题是从父母那里继承的子女主义元素“UL”，“LI”......

我应该修理什么？任何人都可以帮助PLZ？

演示就在这里 - ＆gt; http://fiddle.jshell.net/3h72s/

<style>
* { padding:0; margin:0; }

.tabM { position:relative; } 
.tabM li { float:left; overflow:hidden; } 
.tabM li .nav a { 
    display:block; 
    position:absolute; 
    top:0;
    left:0; 
    width:84px; 
    height:15px;  
    border:1px solid #000;

} 
.tabM li.l1 .nav a { left:0; }
.tabM li.l2 .nav a { left:85px; }
.tabM li.l3 .nav a { left:170px; } 

.tabM li div.tabCont { display:none; background:#f3f3f3; }
.tabM li div.tabCont ul { width:100%; overflow:hidden; }
.tabM li div.tabCont ul li { float:none; }


.tabM li.selected div.tabCont{ display:block; }   
.tabM li.selected .nav a { background: #ff7f81; }


</style>
<div class="tabM">
    <ul>
        <li class="l1 selected">
            <span class="nav"><a href="#">tab1</a></span>
            <ul class="tabCont">
                <ul>
                    <li>tab111</li>
                    <li>tab111</li>
                </ul>
            </ul>
        </li>
        <li class="l2">
            <span class="nav"><a href="#">tab2</a></span>
            <div class="tabCont">
                <ul>
                    <li>tab222</li>
                    <li>tab222</li>
                </ul>
            </div>
        </li>
        <li class="l3">
            <span class="nav"><a href="#">tab3</a></span>
            <div class="tabCont">
                <ul>
                    <li>tab333</li>
                    <li>tab333</li>
                </ul>
            </div>
        </li>
    </ul>        
</div>            
<script>
$(function(){
    $(".tabM li .nav").bind("click keyup", function(){
        $(".tabM li").removeClass("selected").eq( $(this).parent().index() ).addClass("selected");
    });    
}); 

</script>

Answer 1

你使用错误的CSS选择器 - 尝试使用“＆gt;” （孩子）而不是“”（后代）

.tabM>ul>li

顺便说一句，那里有jQuery UI

<强> UPD ：你的小提琴还有一个错误

<ul class="tabCont">
    <ul>
        <li>tab111</li>
        <li>tab111</li>
    </ul>
</ul>

而不是

<div class="tabCont">
    <ul>
        <li>tab111</li>
        <li>tab111</li>
    </ul>
</div>

我已经更新了你的小提琴

Answer 2

您已使用$(".tabM li")元素来获取索引，但您错过了.tabCont中包含的内部li，它正在获取li的错误索引。

试试这个小提琴

http://fiddle.jshell.net/3h72s/5/

HTML代码：

 <div class="tabM">
        <ul>
            <li class="main-nav l1 selected">
                <span class="nav"><a href="#">tab1</a></span>
                <ul class="tabCont">
                    <ul>
                        <li>tab111</li>
                        <li>tab111</li>
                    </ul>
                </ul>
            </li>
            <li class="main-nav l2">
                <span class="nav"><a href="#">tab2</a></span>
                <div class="tabCont">
                    <ul>
                        <li>tab222</li>
                        <li>tab222</li>
                    </ul>
                </div>
            </li>
            <li class="main-nav l3">
                <span class="nav"><a href="#">tab3</a></span>
                <div class="tabCont">
                    <ul>
                        <li>tab333</li>
                        <li>tab333</li>
                    </ul>
                </div>
            </li>
        </ul>        
    </div>

JS：

$(function(){
        $(".tabM li .nav").bind("click keyup", function(){
            $(".tabM li.main-nav").removeClass("selected").eq( $(this).parent().index() ).addClass("selected");
        });    
    });

jquery选项卡菜单不起作用

2 个答案: