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");
});

Answer 4

我想你想要这个：

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

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

4 个答案: