突出显示所选页码的有效方法是什么？
[英]What is the efficient way to highlight the selected page number?
问题描述
我在html页面的<li>中有数字，这些数字代表页面数：
<ol id="numbers">
<li class="idx">1</li>
<li class="idx">2</li>
...
...
<li class="idx">n</li>
</ol>
页数是动态的，如何使用jQuery来加粗被单击的页码文本，而其他页码文本则保持默认字体样式？ 当选择了新的页码时，是否必须使用for循环将未选择的样式更改为默认样式？
4 个解决方案
解决方案1
3 已采纳 2011-09-21 09:56:04
更好的解决方案是让.active css类具有用于活动页面的样式。 并点击设置：
$('#numbers li').click(function() {
$('#numbers li.active').removeClass('active');
$(this).addClass('active');
});
解决方案2
0 2011-09-21 09:55:02
您可以使用简单的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，并将其他列表项保留在以前的状态，因此，如果以前选择了该列表，则此代码不会更改以前的状态。 如果只需要突出显示一个项目，则最好的方法是从所有列表项目中删除粗体样式，然后按照每个人的建议，将粗体样式添加到当前选定的项目中。
解决方案3
0 2011-09-21 09:55:21
假设存在包含您的样式的.bold类：
$("#number li").click(function() {
$(this).addClass("bold").siblings().removeClass("bold");
});
解决方案4
0 2011-09-21 09:58:27
我想你想要这个：
脚本：
$('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
用PHP添加类以突出显示所选菜单的最简单方法是什么？
[英]What is the simplest way to add a class to highlight the selected menu with PHP?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.