[英]add/remove class with jQuery on link select
我正在尝试在jQuery中编写一个函数,该函数会将一个类添加到选定的链接(在iframe中打开页面),然后在选择另一个链接时删除该类。 之前,我从另一个成员那里得到了一些类似类型的帮助,但其中涉及单选按钮和表格。
我尝试玩了一段时间,但是jQuery对我来说仍然很新,所以我对此并不了解。
基本上,我在<div id="CollapsiblePanelContent"> ... </div>
包含大约3-4组链接,我想在用户选择的此容器内的<a>
标签中添加样式。
任何帮助将不胜感激。 谢谢。
<div id="CollapsiblePanelContent">
<a href="page1.asp" onclick="return handlelink(this)">Link1</a>
<a href="page2.asp" onclick="return handlelink(this)">Link2</a>
<a href="page3.asp" onclick="return handlelink(this)">Link3</a>
<a href="page4.asp" onclick="return handlelink(this)">Link4</a>
</div>
<script type='text/javascript'>
$(function() {
$('div').click(function(event) {
$(this).closest('.CollapsiblePanelContent').addClass('selected').parent().siblings().each(function() {
$(this).find('.CollapsiblePanelContent').removeClass('selected');
});
});
});
</script>
$('#CollapsiblePanelContent a').on('click', function(e){
e.preventDefault(); // prevent page reload, you may remove it if don't need
$(this).addClass('selected').siblings().removeClass('selected');
});
由于CollapsiblePanelContent
是id
因此正确的选择器将是#CollapsiblePanelContent
而不是.CollapsiblePanelContent
。
但是如果你使用CollapsiblePanelContent
多div
当时的而不是id
应该是class
与选择.CollapsiblePanelContent
。 因为多个元素可以具有相同的id
。
你可以试试 :
function handlelink(this)
{
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
//do the rest with the click
}
根据HTML,您提供了以下功能:
$(function() {
$('.CollapsiblePanelContent a').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
});
这会将click事件处理程序绑定到<div class="CollapsiblePanelContent">
内的任何<a>
元素,这会将selected
类添加到被单击的链接中,并从其所有同级中移除相同的类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.