2010-07-20 4 views
2

jquery를 사용하여 위쪽 탐색을 작성하려고합니다. 링크 버튼/메뉴가 선택되면 버튼이 강조 표시되고 선택된 항목을 표시하고 해당 페이지로 이동할 때 선택됩니다.Jquery 메뉴 및 버튼 선택

어쨌든 이것을 수행 할 수 있습니까? 이 스크립트는 다소 효과가 있지만 완전히 그렇지는 않습니다. 작동 내가했던

<script type="text/javascript" src="js/jquery-1.4.2.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#hdcnav ul li a').click(function() { 
       $('#hdcnav ul').find('img').each(function(){ 
       var imgsrc = $(this).attr('src'); 
       if(imgsrc.indexOf('selected')>=0){$(this).attr('src',imgsrc.split('-')[0]+".gif");} 
       }); 
       $(this).find('img').attr('src',$(this).find('img').attr('src').split('.')[0]+"-selected.gif"); 
      }); 
    }); 
    </script> 
</head> 
<body> 
    <div id="nav"> 
     <ul> 
      <li><a href="page1.html"><img src="images2.gif" alt="home" /></a></li> 
      <li><a href="page2.html"><img src="images3.gif" alt="" /></a></li> 
      <li><a href="page3.html"><img src="images4.gif" alt="" /></a></li> 
      <li><a href="#"><img src="images4.gif" alt="" /></a></li> 
      <li><a href="#"><img src="images5.gif" alt="" /></a></li> 
      <li><a href="#"><img src="images6.gif" alt="" /></a></li> 
     </ul> 
    </div> 

답변

1

것은 간단하고 직선적가 수행하는 버전 인 선택에 따라 클래스 (이 경우 클릭)를 추가하고 제거하는 것입니다. 그런 다음 CSS를 사용하여 선택한 클래스에서 다른 이미지를 사용하여 주위의 다른 메뉴 항목과 다르게 표시됩니다.

+0

동의, CSS 스프라이트가 갈 방법입니다. – Paul

+0

내가 볼 수있는 예가 있습니까? 감사합니다. – user244394

관련 문제