jquery页面,点击li里面的a标签页面跳转,让当前a标签激活添加背景色和颜色,其它a标签恢复初始状态
时间: 2023-12-14 10:05:38 浏览: 122
可以使用jQuery实现这个功能。首先,我们可以给每个a标签添加一个点击事件,然后在事件处理程序中执行以下操作:
1. 阻止默认的跳转行为。
2. 移除所有a标签的背景色和颜色。
3. 给当前点击的a标签添加背景色和颜色。
4. 获取a标签的href属性,并使用window.location.href跳转到对应的页面。
以下是示例代码:
```javascript
$('li a').click(function(event) {
event.preventDefault(); // 阻止默认的跳转行为
$('li a').removeClass('active'); // 移除所有a标签的背景色和颜色
$(this).addClass('active'); // 给当前点击的a标签添加背景色和颜色
window.location.href = $(this).attr('href'); // 跳转到对应的页面
});
```
在CSS中定义.active类的样式,以实现选中状态的样式效果。
```css
.active {
background-color: #ccc;
color: #fff;
}
```
阅读全文
相关推荐
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)