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=""; } } } }
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:0; bottom:0; 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的属性，总体来说还不太会用。