突出顯示所選頁碼的有效方法是什麼？

我在一個HTML頁面有一個數字在<li>，數字表示的頁數：突出顯示所選頁碼的有效方法是什麼？

<ol id="numbers"> 

    <li class="idx">1</li> 
    <li class="idx">2</li> 
     ... 
     ... 
    <li class="idx">n</li>       
</ol>

頁數爲動力，如何使用jQuery大膽它被點擊頁碼的文字，同時保持其他頁碼文本的默認字體樣式？當選擇了新的頁碼時，我是否必須使用for循環將未選中的一個更改爲默認樣式？

來源

2011-09-21 Leem

只需在點擊「li」中添加一個類即可nd將它從前面選擇的'li'（與那個類）中刪除。不，你不需要循環。 –

http://jsfiddle.net/qE3Qm/2/

更好的辦法是有風格的活動頁面.active CSS類。並把它放在點擊：

$('#numbers li').click(function() { 
    $('#numbers li.active').removeClass('active'); 
    $(this).addClass('active'); 
});

來源

2011-09-21 09:56:04 Samich

爲什麼不能'$（'＃numbers .active'）。removeClass（'active'）'？不需要選擇所有'li's。 –

是的，謝謝，更新。這是一個節省一點的表現 – Samich

我同意費利克斯，它也可能會提高性能。 –

您可以使用簡單的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列表中的項目，因此，如果選擇一個以前這個代碼不改變以前的狀態。如果您只需要突出顯示一個項目，那麼從所有列表項目中刪除粗體樣式的最佳方法是，然後將大膽樣式添加到當前所選項目中，如同大家以前推薦的那樣。

來源

2011-09-21 09:55:02 tildy

假設其中包含你的風格一類.bold的存在：

$("#number li").click(function() { 
    $(this).addClass("bold").siblings().removeClass("bold"); 
});

來源

2011-09-21 09:55:21 karim79

我想你想要這樣的：

SCRIPT：

$('ol#numbers li.idx').click(function(){ 
    $('ol#numbers li.idx').removeClass('bolt-style'); 
    $(this).addClass('bolt-style'); 
});

CSS：

.bolt-style 
{ 
    font-weight:bold; 
}

在這裏看到一個例子：http://jsfiddle.net/expertCode/zaW2Q

來源

2011-09-21 09:58:27 expertCode

突出顯示所選頁碼的有效方法是什麼？

回答

相關問題