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的屬性，總體來說還不太會用。