javascript - 在跨度单击上更改 css

Question

我有 3 个跨度用于导航到 3 个不同的页面，它们对我来说基本上就像按钮，只有我使用的插件要求它们是跨度（为什么我不能使用按钮，所以不要告诉我改用按钮）。

我想要做的是更改单击跨度上的背景颜色，因此如果我在第 3 页上，例如跨度 3 是绿色的，当我单击另一个跨度时，那个跨度会发生变化，并且之前的绿色跨度会恢复正常。

关于如何在 js、html 或 css 中执行此操作的任何想法？

score 2 · Accepted Answer

这很容易用 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之前的任何元素。

1 回答 1