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

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

jquery css

Jquery 突出显示所选页码的有效方法是什么？,jquery,jquery-selectors,css,Jquery,Jquery Selectors,Css,我在html页面的中有数字，这些数字表示页数： <ol id="numbers"> <li class="idx">1</li> <li class="idx">2</li> ... ... <li class="idx">n</li> </ol> 1 2 ... ... n 页面数量是动态

我在html页面的

中有数字，这些数字表示页数：

<ol id="numbers">

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


1
2
...
...
n

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

您可以使用一个简单的函数，并向其添加粗体样式

<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>


.突出显示{字体大小：粗体；}
单击以切换
高光
在这些
段落
$（“p”）。单击（函数（）{
$（this.toggleClass（“突出显示”）；
});

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

假设存在包含您的样式的类

.bold

：

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

更好的解决方案是使用带有活动页面样式的

.active

css类。并将其设置为单击：

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

我想你想要这个：

脚本：

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

CSS:

请参见此处的示例：

只需将一个类添加到单击的

li

，然后将其从先前选择的

li

（使用该类）中删除即可。不，您不需要循环。为什么不

$（'#numbers.active'）。removeClass（'active'）

？不需要选择全部

li

s.Uhm，这不是我的意思。。。您必须将单击处理程序添加到所有

li

s（或使用事件委派）。抱歉，添加到错误的位置。在JSFIDLE中，一切都是正确的。感谢您的关注：）

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