html 페이지의 <li>에 숫자가 있습니다. 숫자는 페이지 수를 나타냅니다.선택한 페이지 번호를 강조하는 효율적인 방법은 무엇입니까?
<ol id="numbers">
<li class="idx">1</li>
<li class="idx">2</li>
...
...
<li class="idx">n</li>
</ol>
더 나은 솔루션은 활성 페이지의 스타일과 .active CSS 클래스를하는 것입니다. 그리고 클릭에 설정 :
$('#numbers li').click(function() {
$('#numbers li.active').removeClass('active');
$(this).addClass('active');
});
왜'$ ('numbers .active')가 아닌가? removeClass ('active')'? 모든 '리'를 선택할 필요가 없습니다. –
예, 감사합니다. 약간의 성능을 절약 할 수 있습니다. – Samich
Felix에 동의합니다. 성능이 향상 될 수도 있습니다. –
간단한 toggleclass 함수를 사용하여 굵게 스타일을 추가 할 수 있습니다.
<style>
.highlight {font-weight:bold; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<body>
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
<script>
$("p").click(function() {
$(this).toggleClass("highlight");
});
</script>
</body>
는하지만 내 버전은 현재 선택된 리를 강조 표시하고 이전 상태 otheher 목록 항목을두고, 그래서 하나를 선택한 경우 이전에이 코드는 이전의 상태를 변경하지 않습니다. 하나의 항목 만 강조 표시해야하는 경우 모든 목록 항목에서 굵게 스타일을 제거한 다음 이전에 권장했던 모든 사람처럼 현재 선택한 항목에 굵게 스타일을 추가하는 것이 가장 좋습니다. 당신의 스타일을 포함하는 클래스 .bold의 존재를 가정
:
$("#number li").click(function() {
$(this).addClass("bold").siblings().removeClass("bold");
});
난 당신이 원하는 생각 :
SCRIPT :
$('ol#numbers li.idx').click(function(){
$('ol#numbers li.idx').removeClass('bolt-style');
$(this).addClass('bolt-style');
});
:
것은 여기에 예를 참조하십시오 클릭 한 'li' a에 클래스를 추가하기 만하면됩니다. 이전에 선택된'li' (그 클래스와 함께)에서 그것을 제거하십시오. 아니요, 당신은 루프가 필요 없습니다. –