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

Question

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

<ol id="numbers">

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

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

Answer 1

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

更好的解决方案是让.active css类具有活动页面的样式。并将其设置为单击：

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

Answer 2

您可以使用一个简单的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，并将其他列表项保留在以前的状态，因此如果该列表项是以前选择的，则此代码不会更改以前的状态。如果您只需要突出显示一个项目，那么最好的方法是从所有列表项中删除粗体样式，然后按照每个人之前的建议，向当前选定的项目添加粗体样式。

Answer 3

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

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