我的 css-classes 没有启动，使用 JQuery toggleClass
好的，我基本上有了这个清单。我想做的只是用toggleClass 突出显示列表中的项目。
<div class="listbox">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
</div>
<script type="text/javascript">
$('#container .listbox li').click(function() {
$(this).toggleClass('highlight');
});
</script>
CSS:
div.listbox ul li{
background: #eee;
padding: 15px 20px;
border-bottom: 1px solid #999;
border-top: 1px solid #fff;}
HEAD:
<style type="text/css">
.highlight{
background: #aaa;
padding: 20px 15px;
border-bottom: 1px solid #fff;
border-top: 1px solid #999;}
</style>
问题是，如果我在 .css-doc 中指定了 css 属性，则无法使用新类修改该值。
我尝试将其放置在 styleattributes 的上方和下方，以及如下所示的 head-region 中。
单击时，js 会添加类和所有内容，但任何预定义值都不会更改。
Ok, so I basicly have this list. What I'm trying to do is just highlighting items in the list with toggleClass.
<div class="listbox">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
</div>
<script type="text/javascript">
$('#container .listbox li').click(function() {
$(this).toggleClass('highlight');
});
</script>
CSS:
div.listbox ul li{
background: #eee;
padding: 15px 20px;
border-bottom: 1px solid #999;
border-top: 1px solid #fff;}
HEAD:
<style type="text/css">
.highlight{
background: #aaa;
padding: 20px 15px;
border-bottom: 1px solid #fff;
border-top: 1px solid #999;}
</style>
The problem is that if I've specified a css property in the .css-doc, I can't modify that value with the new class.
I've tried placing it above and below the styleattributes and, as below, in the head-region.
When clicking, the js adds the class and all, but any predefined values wont change.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
尝试增加类特异性，例如：
Try increasing the class specificity for something like: