1点击效果：
2关键代码：
css:
#div{
display:inline-block;
width:100px;
height:150px;
border-radius: 5px;
blackground-color:#fdfcf8;
}
#ul{
list-style: none;
padding:0px;
margin:0px;
}
#ul li{
display:block;
height:30px;
text-align:center;
}
#ul li a{
display:block;
text-decoration: none;
text-align: center;
color:black;
}
#ul li a:visited,#ul li a:hover{
background-color:darkgray;
}
.a_Onclick{
border-left-style: solid;
border-left-color:red;
border-left-width:5px;
}js:
var a = document.getElementsByTagName("a");
for(let i=0;i<a.length;i++){
a[i].onclick=function(){
for(let j=0;j<a.length;j++){
if(i==j){
a[i].className="a_Onclick";
}else{
a[j].className="";
}
}
}
}View js
jq:
$('ul#ul li').click(function(){
var index = $(this).index();
$(this).addClass('a_Onclick').siblings().removeClass('a_Onclick');
})主要想法：在css中设定一个链接被点击效果的css样式，在用js监听，当有一个链接被点击时，该链接css样式改变，同时其兄弟节点的css样式也随之改变。
3鼠标滑动造成底部线条滑动特效：
transform:scaleX(x);线条缩放（通过x轴）的效果,x为0时显示，x为1时隐藏；
再用:before和:after两个伪类来定义鼠标滑动的状态；
transition：过渡的属性
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>侧边栏效果</title>
<link rel="stylesheet" href="../css/nav.css">
</head>
<body>
<div id="div">
<ul id="ul">
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
<li>第四条</li>
<li>第五条</li>
</ul>
</div>
</body>
</html>
css:
#div{
width:200px;
margin:0 auto;
}
#ul{
list-style: none;
width:200px;
}
#ul li{
position:relative;
display:block;
height:50px;
text-align:center;
line-height:50px;
cursor:pointer;
}
#ul li::before{
content:"";
position:absolute;
left:;
bottom:;
width:200px;
height:2px;
background:#FFE300;
transition:transform .5s;
transform:scaleX(0);
transform-origin:100% 0;//改变线条运动方向
}
#ul li:hover::before{
transform:scaleX(1);
transform-origin:0 0;
}总结：查了百度，学到了这几个css3的属性，总体来说还不太会用。