突出显示所选页码的有效方法是什么？答案

【问题标题】：What is the efficient way to highlight the selected page number?突出显示所选页码的有效方法是什么？
【发布时间】：2011-09-21 18:19:44
【问题描述】：

我在一个html页面的<li>中有数字，数字代表页数：

<ol id="numbers">

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

页数是动态的，如何使用jQuery将被点击的页码文本加粗，而其他页码文本保持默认字体样式？选择新页码时，是否必须使用 for 循环将未选择的样式更改为默认样式？

【问题讨论】：

只需将一个类添加到单击的li 并将其从先前选择的li 中删除（带有该类）。不，你不需要循环。

标签： jquery jquery-selectors css

【解决方案1】：

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

更好的解决方案是让.active css 类具有活动页面的样式。并在点击时设置它：

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

【讨论】：

为什么不$('#numbers .active').removeClass('active') ？无需全选lis。
嗯，我不是这个意思...你必须将点击处理程序添加到所有lis（或使用事件委托）。
抱歉，加错地方了。在 jsfiddle 中一切都是正确的。感谢您的关注:)

【解决方案2】：

假设存在一个包含您的样式的类.bold：

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

【讨论】：

【解决方案3】：

我想你想要这个：

脚本：

$('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

【讨论】：

【解决方案4】：

您可以使用简单的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>

但我的版本只是突出显示当前选择的 li，并将其他列表项保留在以前的状态，所以如果以前选择了那个，则此代码不会更改以前的状态。如果您只需要突出显示一个项目，那么最好的方法是从所有列表项中删除粗体样式，然后将粗体样式添加到当前选定的项目中，正如大家之前推荐的那样。

【讨论】：