首页 > 代码库 > 选项卡
选项卡
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; font-size: 32px; } ul,li{ list-style: none; } #tab{ margin: 10px auto ; width: 500px; } #tab ul{ position: relative; top: 1px; z-index: 100; } #tab ul li{ float: left; margin-right: 5px; margin-left: 5px; width: 100px; height: 30px; width: 30%; line-height: 30px; text-align: center; border: 1px solid #dddddd; cursor: pointer; } #tab ul li.select{ border-bottom: none; background:red; } #tab div{ display: none; clear: both; height: 100px; line-height: 100px; text-align: center; border:1px solid #dddddd; } #tab div.select{ display: block; } </style> </head> <body> <div id="tab"> <ul> <li class="select">视频</li> <li>综艺</li> <li>秒拍</li> </ul> <div class="select">视频内容</div> <div>综艺内容</div> <div>秒拍内容</div> </div> <script type="text/javascript"> var oTab =document.getElementById("tab"); var oLis = oTab.getElementsByTagName("li"); var oDivs = oTab.getElementsByTagName("div"); for(var i = 0;i<oLis.length;i++){ var oLi =oLis[i]; oLi.index = i; oLi.onmouseover = function(){ for(var j = 0;j<oLis.length;j++){ oLis[j].className=""; oDivs[j].className=""; } this.className="select"; oDivs[this.index].className="select"; } oLi.onmouseout = function(){ for(var j = 0;j<oLis.length;j++){ console.log("进来了111 "+i); oLis[j].className=""; oDivs[j].className=""; } oLis[0].className="select"; oDivs[0].className="select"; } } </script> </body> </html>
选项卡
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。