我有 3 个跨度用于导航到 3 个不同的页面,它们对我来说基本上就像按钮,只有我使用的插件要求它们是跨度(为什么我不能使用按钮,所以不要告诉我改用按钮)。
我想要做的是更改单击跨度上的背景颜色,因此如果我在第 3 页上,例如跨度 3 是绿色的,当我单击另一个跨度时,那个跨度会发生变化,并且之前的绿色跨度会恢复正常。
关于如何在 js、html 或 css 中执行此操作的任何想法?
我有 3 个跨度用于导航到 3 个不同的页面,它们对我来说基本上就像按钮,只有我使用的插件要求它们是跨度(为什么我不能使用按钮,所以不要告诉我改用按钮)。
我想要做的是更改单击跨度上的背景颜色,因此如果我在第 3 页上,例如跨度 3 是绿色的,当我单击另一个跨度时,那个跨度会发生变化,并且之前的绿色跨度会恢复正常。
关于如何在 js、html 或 css 中执行此操作的任何想法?
这很容易用 jQuery 实现。
jQuery
$('span').on('click', function() {
$('span').removeClass('active');
$(this).addClass('active');
});
CSS
span {
background: #c1c1c1;
display: block;
width: 100px;
height: 25px;
float: left;
}
span.active {
background: green;
}
html
<span class="active">one</span>
<span>two</span>
<span>three</span>
<span>four</span>
这只是将类添加active
到单击的元素,同时删除active
之前的任何元素。