第一種:選項卡單擊點擊切換
<!DOCTYPE html> <html> <head> <metacharset="utf-8" /> <title>選項卡-點擊觸發效果</title> <styletype="text/css"> *{ margin:0; padding:0; list-style:none; } body{ background:#58596B; display:flex; justify-content:center; } #box{ margin-top:10%; } .boxul{ width:600px; height:60px; background:#33344A; } .boxul li{ float:left; transition:0.3s; } .boxul li a{ display:block; width:100px; height:60px; line-height:60px; /*border:1px solid red;*/ text-decoration:none; text-align:center; color:#717181; font-size:15px; } .boxtwo{ clear:left; } .boxtwoul{ width:600px; height:300px; background:white; } .boxtwoul li{ position:absolute; transition:0.3s; padding:30px; font-family:"微軟雅黑"; font-size:15px; width:600px; height:10px; } .show{ opacity:3; } .hide{ opacity:0; } .bj{ background:#e74c3c; } </style> <scripttype="text/javascript"> window.onload=function(){ varOneLi=document.getElementsByClassName('box')[0].getElementsByTagName('li'); varTwoLi=document.getElementsByClassName('boxtwo')[0].getElementsByTagName('li'); vara=document.getElementsByClassName('box')[0].getElementsByTagName('a') OneLi[0].className='bj' a[0].style.color='white' for(vari=0;i<OneLi.length;i++){ OneLi[i].index=i OneLi[i].onclick=function(){ varnum=parseInt(this.index) for(varj=0;j<OneLi.length;j++){ OneLi[j].className='' TwoLi[j].className='hide' a[j].style.color='' } OneLi[num].className='bj' TwoLi[num].className='show' a[num].style.color='white' } } } </script> </head> <body> <pid="box"> <divclass="box"> <ul> <li><ahref="javascript:void(0)">新聞</a></li> <li><ahref="javascript:void(0)">綜藝</a></li> <li><ahref="javascript:void(0)">娛樂</a></li> <li><ahref="javascript:void(0)">購物</a></li> </ul> </p> <pclass="boxtwo"> <ul> <liclass="show">還在打王者LOL呢?國傢大事你關心瞭麼?</li> <liclass="hide">元芳薛之謙事件你怎麼看?</li> <liclass="hide">娛樂圈的那點事,潛規則?</li> <liclass="hide">淘寶雙十一你們是不是又要剁手瞭?</li> </ul> </p> </p> </body> </html>