0

タブメニューを作ろうとしているのですが、問題があります...問題は、親から継承する子要素「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

インデックスを取得するために 要素を使用しましたが、 の不適切なインデックスを取得$(".tabM li")している に含まれる内部の li を見逃しました。.tabContli

このフィドルを試してください

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 に答える
0

間違った CSS セレクターを使用しています - " " (子孫) の代わりに ">" (子) を使用してみてください

.tabM>ul>li

ところで、そのためのjQuery UIがあります

UPD：あなたのフィドルにもう1つのエラーがありました

<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 に答える