In the last article, I also wrote about using JS to achieve the tab switching effect, but the code last time was more complicated, and this time it is a simplified version.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab效果</title> <style type="text/css"> ul { list-style: none; } *{ margin: 0; padding: 0; } #tab{ border: 1px solid #ccc; margin: 20px auto; width: 403px; border-top: none; } .list ul{ overflow: hidden; } .list li{ float: left; } .list li{ padding-left: 28px; padding-right: 28px; padding-top: 6px; padding-bottom: 6px; border: 1px solid #ccc; background: -moz-linear-gradient (top, #FEFEFE, #EDEDED); background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed)); border-right: none; cursor: pointer; } #listCon{ height: 100px; } #listCon div{ padding:10px; position:absolute; opacity:0; filter:alpha(opacity=0); } .list li:first-child{ border-left: none; } .list li:hover{ background: #fff; border-bottom: none; } .list li.cur{ background: #fff; border-bottom: none; } #listCon div.cur{ opacity:1; filter:alpha(opacity=100); } </style> </head> <body> <div id="tab"> <div class="list"> <ul> <li class="cur">许嵩</li> <li>Jay Chou</li> <li>JJ Lin</li> <li>Eason Chan</li> </ul> </div> <div id="listCon"> <div class="cur">Broken bridge and residual snow, thousands of Baidu, auditory hallucinations, in imagination</div> <div>Red Dust Inn, Cowboy is busy, give me time for a song, listen to my mother</div> <div>Wind-blown summer, Jiangnan, a thousand years later</div> <div>Ten years, the king of K songs, exaggerated</div> </div> </div> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById("tab"); var lis = oDiv.getElementsByTagName("li"); var oDivCon = document.getElementById("listCon"); var lisDiv = oDivCon.getElementsByTagName("div"); for(var i=0;i<lis.length;i++){ lis[i].index = i; lis[i].onmouseover = function(){ show(this.index); } } function show(a){ for(var j=0;j<lis.length;j++){ lis[j].className = ""; lisDiv[j].className = ""; } lis[a].className = "cur"; lisDiv[a].className = "cur"; } } </script> </body> </html>