0

我试图制作一个选项卡菜单，但它有一些问题......我认为问题是从父母继承的childrend元素“UL”，“LI”......

我应该解决什么问题？有人可以帮忙吗？

演示就在这里-> 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>
4

2 回答 2

0

您使用了错误的 CSS 选择器 - 尝试使用“>”（子）而不是“”（后代）

.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>

我已经更新了你的小提琴

于 2013-08-05T06:01:26.633 回答
0

您已使用该$(".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");
        });    
    });
于 2013-08-05T06:18:26.433 回答