메뉴를 루프하고 클래스를 제거한 다음 현재 메뉴 항목에 클래스를 추가하는 방법
-
19-09-2019 - |
문제
콘텐츠 슬라이더 패널을 탐색하는 데 사용되는이 메뉴 구조가 있습니다.
<div id="menu">
<ul>
<li><a href="#1" class="cross-link highlight">Bliss Fine Foods</a></li>
<li><a href="#2" class="cross-link">Menus</a></li>
<li><a href="#3" class="cross-link">Wines</a></li>
<li><a href="#4" class="cross-link">News</a></li>
<li><a href="#5" class="cross-link">Contact Us</a></li>
</ul>
</div>
이 요소를 루프하고 하이라이트 클래스를 제거한 다음 하이라이트 클래스를 현재 / 마지막으로 클릭 한 메뉴 항목에 추가하고 싶습니다.
어떤 아이디어? 모든 도움은 대단히 감사하겠습니다.
감사
홍옥
해결책
그렇게 될 수 있습니까?
$('#menu li a').click(function(){
$('#menu li a').removeClass('highlight');
$(this).addClass('highlight');
});
다른 팁
...your <head> and opening <body> tags...
<div id="menu">
<ul>
<li><a href="#1" class="cross-link highlight">Bliss Fine Foods</a></li>
<li><a href="#2" class="cross-link">Menus</a></li>
<li><a href="#3" class="cross-link">Wines</a></li>
<li><a href="#4" class="cross-link">News</a></li>
<li><a href="#5" class="cross-link">Contact Us</a></li>
</ul>
</div>
<script type="text/javascript">
(function( $ ) {
$( "#menu ul li a" ).click( function() {
$( this ).parent().parent().filter( 'a' ).removeClass( 'highlight' );
$( this ).addClass( 'highlight' );
});
})( jQuery );
</script>
</body>
</html>
제휴하지 않습니다 StackOverflow