JQUERY简单按钮轮换选中效果实现方法

下面是详细讲解“JQUERY简单按钮轮换选中效果实现方法”的完整攻略。

1. 确定样式和HTML结构

首先我们需要确定轮换中选中和未选中状态的样式名，以及HTML结构。这里我们假设选中样式名为.active，未选中样式名为.inactive，对应的HTML结构如下：

<ul class="button-group">
  <li class="button-item active">按钮1</li>
  <li class="button-item inactive">按钮2</li>
  <li class="button-item inactive">按钮3</li>
</ul>

2. 绑定点击事件

接着，我们使用jQuery绑定点击事件，当点击某个按钮时，将该按钮的样式设置为选中状态，同时将其他按钮的样式设置为未选中状态。

$('.button-item').click(function(){
  $(this).addClass('active').siblings().removeClass('active');
});

3. 示例说明

下面给出两条示例说明。

示例1

假设我们有一个列表，要求点击每个列表项时，该列表项的样式变为选中状态，同时其他列表项的样式为未选中状态。

<ul class="list">
  <li class="list-item active">列表项1</li>
  <li class="list-item inactive">列表项2</li>
  <li class="list-item inactive">列表项3</li>
</ul>

$('.list-item').click(function(){
  $(this).addClass('active').siblings().removeClass('active');
});

示例2

假设我们有一个导航栏，要求点击每个导航项时，该导航项的样式变为选中状态，同时其他导航项的样式为未选中状态。

<ul class="nav">
  <li class="nav-item active">导航1</li>
  <li class="nav-item inactive">导航2</li>
  <li class="nav-item inactive">导航3</li>
</ul>

$('.nav-item').click(function(){
  $(this).addClass('active').siblings().removeClass('active');
});

以上就是“JQUERY简单按钮轮换选中效果实现方法”的完整攻略。