jQuery 滑动及点击切换效果
效果图如下：
初始化
hover效果：滑动menuitem，‘首页’不变，字体颜色改变，有下划线展示。
即在动态添加boder-bottom，改变字体颜色颜色
.menuItem:hover{
border-bottom: 2px solid #108ee9;
color: #108ee9;
}
click效果：点击其他menuitem，‘首页’样式清除，且字体颜色改变，有下划线展示。
即点击menuitem，利用事件委托，动态添加itemSelected，且移除相邻兄弟属性itemSelected
$('li').eq(index).addClass('itemSelected').siblings().removeClass('itemSelected')
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,html{
margin: 0;
padding: 0;
}
.wrap{
}
.menu{
background: black;
height: 60px;
width: 100%;
list-style:none;
position: fixed;
top: 0;
margin: 0;
}
.menuItem{
font-size: 14px;
text-align: center;
float: left;
width: 90px;
color: white;
line-height: 60px;
margin-top: -1px
}
.itemSelected{
border-bottom: 2px solid #108ee9;
color: #108ee9;
}
.menuItem:hover{
border-bottom: 2px solid #108ee9;
color: #108ee9;
}
.clearfix:after{
display: block;
content: '';
clear: both;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="menu clearfix" >
<li class="itemSelected menuItem" >首页</li>
<li class="menuItem" >自驾导航</li>
<li class="menuItem" >共享出行</li>
<li class="menuItem" >公共出行</li>
<li class="menuItem" >信息服务</li>
<li class="menuItem" >相关下载</li>
</ul>
<div class="content">
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
//采用事件委托进行绑定
$('.menu').on('click',function (event) {
// 判断标签是否li
if (event.target.tagName === 'LI') {
$tar =$(event.target)
//获取子元素index
var index = $tar.parent().children().index($tar);
$('li').eq(index).addClass('itemSelected').siblings().removeClass('itemSelected')
}
})
</script>
</body>
</html>
