jQuery/CSS - 대상 대신 리튬?

나는 현재 부트 스트랩 내 웹 사이트에 scrollspy 통합 해요 - 나는이 같은 메뉴와 함께 일하고 있어요 : 지금 http://development.tobypitman.com/css/menu.html jQuery/CSS - 대상 대신 리튬?

를 - 내가 탐색 내 리를 타겟팅 할 수는 -하지만 내가 원하는 것은을 대상으로하는 것입니다 li a.

selector = this.selector 
     + '[data-target="' + target + '"],' 
     + this.selector + '[href="' + target + '"]' 

    active = $(selector) 
     .parent('li') 
     .addClass('active')

누구나?

출처

2012-04-27 Christoffer Jacobsen

당신은 선택적으로 사용할 수 있습니다

active = $(selector) 
    .parent('li') 
    .children('a') 
    .addClass('active');

출처

2012-04-27 13:48:28

아마도 다음과 같이 작동할까요?

active = $(selector) 
     .parent('li') 
     .find('a') 
     .addClass('active')

출처

2012-04-27 13:07:55 Dutchie432

난 그냥 그것을 시도 - 작동하는 것처럼 보인다. 업데이 트되면 나는 방화범 쟁이로 확인하고 활성 클래스는 '리'에 처음 '리'에만 설정되었습니다. 그리고 그것은 변함이 없었습니다. –

코드화 된대로 선택자의 부모 li 요소에만 적용되기 때문입니다. – Dutchie432

그러면 어떻게 리를 목표로 삼을 수 있습니까? –

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.MenuLList').find('a.Testing').hover(function() { $(this).addClass('Active'); }, function() { $(this).removeClass('Active'); }); 
     }); 
    </script> 
    <style type="text/css"> 
     .MenuLList 
     { 
      list-style: none; 
     } 

     .MenuLList li 
     { 
      margin: 5px 0px; 
     } 

     .MenuLList li a 
     { 
      text-decoration: none; 
     } 

     .Inactive 
     { 
      color: Red; 
      width: 100px; 
      background-color: Yellow; 
     } 

     .Active 
     { 
      font-weight: bolder; 
      color: Green; 
      width: 300px; 
      background-color: Lime; 
      padding-left: 30px; 
     } 
    </style> 
</head> 
<body> 
    <ul class="MenuLList"> 
     <li><a class="Inactive" href="#">Test 1</a></li> 
     <li><a class="Testing Inactive" href="#">Test 2</a> </li> 
     <li><a class="Testing Inactive" href="#">Test 3</a> </li> 
     <li><a class="Testing Inactive" href="#">Test 4</a> </li> 
    </ul> 
</body> 
</html>

출처

2012-04-28 06:43:59 Thulasiram

이 링크를 참조하십시오 : http://jsfiddle.net/nanoquantumtech/dw9u7/ – Thulasiram

Test 1

에는 Testing CSS 클래스가 없습니다. 호버 효과가 발생하지 않습니다. – Thulasiram

jQuery/CSS - 대상 대신 리튬?

답변

관련 문제