我试图在用户单击所选类别时更改列表项,将其更改为单击项。我有以下代码:
$(function() {
$("a.product-page li").click(function(){
$(this).parent("a").addClass("selected-page");
$("#options a.selected-page").removeClass("selected-page");
});
});
但是,removeClass有效,而addClass不起作用。
这是Site。
HTML:
<ul id="options">
<a href="#summary" id="summary" class="product-page selected-page"><span></span><li>Summary</li></a>
<a href="#specs" id="specs" class="product-page"><span></span><li>Specs</li></a>
<a href="#media" id="media" class="product-page"><span></span><li>Media</li></a>
<a href="#reviews" id="review" class="product-page"><span></span><li>Reviews</li></a>
</ul>
CSS:
ul#options {
margin-left:0px;
}
ul#options li{
list-style:none;
padding: 10px 20px;
background: #CCC;
border-top: 1px #999 solid;
border-left: 1px #999 solid;
border-right: 1px #999 solid;
}
ul#options a{
display:block;
border:none !important;
}
ul#options a.selected-page span{
position:absolute;
width:0px;
height:0px;
border-width:10px;
border-color:transparent #999999 transparent transparent;
border-style:solid;
margin-left:270px;
margin-top:11px;
}
ul#options a:last-child li {
border-bottom:1px #999 solid;
}
最佳答案
您应将<a>
链接标记包装在li
标记内,如下所示,
HTML:
<ul id="options">
<li><a href="#summary" id="summary" class="product-page selected-page"><span></span>Summary</a></li>
<li><a href="#specs" id="specs" class="product-page"><span></span>Specs</a></li>
<li><a href="#media" id="media" class="product-page"><span></span>Media</a></li>
<li><a href="#reviews" id="review" class="product-page"><span></span>Reviews</a></li>
</ul>
您正在删除刚添加的类。您可以将remove类移到addclass之上,或者只是在删除时不排除它。
码:
$(function() {
$("a.product-page", $('#options')).click(function(){
$(this).addClass("selected-page");
$("#options a.selected-page").not(this).removeClass("selected-page");
});
});
关于javascript - jQuery .addClass不在$(this)上执行,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12680763/