Меню вкладки jquery не работает

Question

Я пытаюсь сделать меню вкладки, и есть некоторые проблемы с ним ... Я думаю, что проблема заключается в элементе childrend «UL», «LI», который наследуется от родителей .. .

что я должен исправить? может кто-нибудь помочь PLZ?

демо прямо здесь ->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 - попробуйте использовать ">" (ребенок) вместо "" (потомок)

.tabM>ul>li 

BTW, есть 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.

Попробуйте эту скрипку

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"); 
     });  
    });