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=""; } } } }
主要想法:在css中设定一个链接被点击效果的css样式,在用js监听,当有一个链接被点击时,该链接css样式改变,同时其兄弟节点的css样式也随之改变。
原文:https://www.cnblogs.com/Zxq-zn/p/11372732.html