tailwindcss通过按钮进行选择,且筛选按钮名字不会随之改变
时间: 2023-09-02 12:12:35 浏览: 34
可以使用`class`来实现这个功能,例如:
```html
<div class="flex">
<button class="filter-btn active">按钮1</button>
<button class="filter-btn">按钮2</button>
<button class="filter-btn">按钮3</button>
</div>
```
然后在CSS中定义`.active`类的样式,这样在点击按钮时就可以通过添加或移除`.active`类来实现按钮的选择:
```css
.filter-btn {
padding: 0.5rem 1rem;
border: 1px solid #ccc;
background-color: #fff;
}
.filter-btn.active {
border-color: blue;
background-color: #f5f5f5;
}
```
当用户点击某个按钮时,使用JavaScript来添加或移除`.active`类即可:
```javascript
const btns = document.querySelectorAll('.filter-btn');
btns.forEach(btn => {
btn.addEventListener('click', () => {
btns.forEach(btn => btn.classList.remove('active'));
btn.classList.add('active');
});
});
```
这样,当用户点击按钮时,会先移除所有按钮上的`.active`类,再把当前点击的按钮添加上`.active`类,实现按钮的选择效果。