css如何实现两个按钮的切换效果

CSS是前端开发必不可少的技能，实现两个按钮的切换效果也是常见的需求之一。今天我们来学习一下如何用CSS来实现这个效果。

首先，我们需要一个HTML结构来放置两个按钮。以下是一个简单的按钮结构：

div class="btn-group">
      button class="btn active">
    按钮1/button>
      button class="btn">
    按钮2/button>
    /div>

上述结构中，div元素有一个btn-group类，里面有两个button元素，一个有active类，表示默认是选中的。然后我们需要为这个结构添加CSS样式：

/* 按钮样式 */.btn {
      background-color: #fff;
      border: 1px solid #ddd;
      color: #333;
      cursor: pointer;
      font-size: 14px;
      padding: 6px 12px;
}
/* 已选中按钮样式 */.active {
      background-color: #007bff;
      border-color: #007bff;
      color: #fff;
}
/* 鼠标悬停在按钮上的样式 */.btn:hover {
      background-color: #f6f6f6;
}
    

以上样式中，我们定义了按钮的基本样式，已选中按钮的样式，以及鼠标悬停在按钮上的样式。

接下来，我们要添加一些JavaScript代码来处理按钮的切换效果：

var btns = document.querySelectorAll('.btn');
    for(var i = 0;
     i  btns.length;
 i++) {
  btns[i].addEventListener('click', function() {
        var activeBtn = document.querySelector('.btn.active');
        activeBtn.classList.remove('active');
        this.classList.add('active');
  }
    );
}
    

以上代码中，我们使用querySelectorAll()方法来选择所有具有btn类的按钮，并使用for循环为它们添加了一个点击事件。当某个按钮被点击时，我们用querySelector()方法选择当前已选中的按钮，并使用classList.remove()方法从它的类中移除active类；然后，我们再使用classList.add()方法为当前被点击的按钮添加active类，即选中该按钮。

通过以上代码和CSS样式，我们就成功地实现了两个按钮的切换效果。您可以在自己的项目中尝试这个方法，加强对CSS样式和JavaScript的理解!

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！