前言:横向箭头菜单
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>menu</title>
<style type="text/css">
*{margin: 0;padding: 0;}
i{font-style: normal;}
html, body, div{
margin: 0;
padding: 0;
}
.menus{
margin: 20px;
font-size: 0;
border-left:1px solid #1A65FF;
}
.menus p{
display: inline-block;
height: 32px;
margin: 0 -15px 0 0;
padding: 0 15px 0 0;
background: url(menus2.png) no-repeat right 0;
background-size: auto 100%;
color: #1A65FF;
font-size: 12px;
line-height: 32px;
text-decoration: none;
box-sizing: border-box;
cursor: pointer;
}
.menus p span{
display: inline-block;
padding: 0 8px 0 20px;
border-top: 1px solid #1A65FF;
border-bottom: 1px solid #1A65FF;
height: 32px;
line-height: 32px;
box-sizing: border-box;
}
.menus p.home span{
padding-left: 10px;
}
.menus p span i{
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
background: #fff;
border-radius: 50%;
text-align: center;
}
.menus p span b{
}
.menus p.act{
background: url(menus1.png) no-repeat 100% 0;
background-size: auto 100%;
color: #fff;
}
.menus p.act span{
background: #1A65FF url(menus2.png) no-repeat left 0;
background-size: auto 100%;
}
.menus p.act b{
color: #fff;
margin-left:4px;
}
.menus p.act span i{
color:#1A65FF;
}
.menus p.act2 span{
background: #1A65FF;
}
</style>
</head>
<body>
<div class="menus">
<p val="1" class="home" href="#"><span><i>1</i><b>预规划</b></span></p>
<p href="#"><span><i>2</i><b>预规划</b></span></p>
<p href="#"><span><i>3</i><b>预规划</b></span></p>
</div>
<script src="jquery.min.js"></script>
<script>
$(".menus").on("click","p",function(e){
e.preventDefault();
console.log(11);
var val = $(this).attr('val')
if(val == 1){
$(this).addClass('act').siblings().removeClass("act");
$(this).addClass('act2').siblings().removeClass("act2");
}else{
$(this).siblings().removeClass("act2");
$(this).addClass('act').siblings().removeClass("act");
}
})
</script>
</body>
</html>
默认效果与选中效果的切换要主要第一项选中时多了个act2,是为了让这个选中项背景色铺满
是否选中效果