2011-05-01 4 views
0

클릭하면 li에 테두리를 추가하려고합니다. 여기 내 코드가있다.JQuery를 올바르게 선택할 수 없습니다.

<div class="noselect round" id="teach_edit_navigation_holster"> 
<ul id="teach_edit_navigation"> 
    <li id="edittab_one" class="teach_nav_roundleft"> 
     <span>Item</span> 
    </li>  
    <li class="" id="edittab_two"> 
     <span>Item</span> 
    </li> 
    <li class="" id="edittab_three"> 
     <span>Documents</span> 
    </li> 
    <li class="" id="edittab_four"> 
     <span>Item</span> 
    </li> 
    <li class="" id="edittab_five"> 
     <span>Item</span> 
    </li> 
    <li class="teach_nav_roundright" id="edittab_six"> 
     <span>Item</span> 
    </li>     
</ul> 
</div> 

다음은 Jquery입니다. 나는 모든 리튬 상자에 경계선이 있어야한다. 범위는 아니다. 아래 코드는 범위에 테두리를 넣고 있습니다. 나는 실제 li을 선택하는 방법을 모른다. 고맙습니다!

$(document).ready(function() { 
    $('#edittab_two_s, #edittab_three_s, #edittab_four_s, #edittab_five_s, #edittab_six_s').hide(); 
// $('#teach_edit_navigation').find('#edittab_one').css({ 
//   "background-color": "black" // set highlight to first item on page "home" 
//  }); 
}); 

$('#teach_edit_navigation_holster li').click(function() { 
    var Vinfotab = this.id + '_s', 
     $this = $(this); 
    $('.edittab:visible').fadeOut('fast', function() { 
     $('#' + Vinfotab).fadeIn('fast'); 
     $('#teach_edit_navigation_holster li span').css({ 
      "border": "none" // reset all to default color 
     }); 
     $this.find('span').css({ 
      "border-bottom": "1px solid black" // set highlight to this element only 
     }); 
    }); 
}); 
+0

나는 코드가 작동 할 수 없었다. – Kobi

답변

1

<li>$this로 표시됩니다. 이것은 당신을 위해 일해야 내가 너무 * 자세히 *를 읽어 보지 않았 인정하지만

$('#teach_edit_navigation_holster li').css({ // !!! remove span 
    "border": "none" // reset all to default color 
}); 
$this.css({ // !!! remove .find('span') 
    "border-bottom": "1px solid black" // set highlight to this element only 
}); 
+0

정말 고마워요! –

1

변경이 :이 들어

$this.find('span').css({ 
    "border-bottom": "1px solid black" // set highlight to this element only 
}); 

은 :

$this.css({ 
    "border-bottom": "1px solid black" // set highlight to this element only 
}); 
관련 문제