类似淘宝首页右侧的标签切换效果。
效果如下:
HTML代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Tab切换</title> <link type="text/css" rel="stylesheet" href="index.css"> <script src="index.js"></script> </head> <body> <div id="tab"> <div id = "tab-title"> <ul> <li> <a href="#">公告</a> </li> <li> <a href="#">规则</a> </li> <li> <a href="#">论坛</a> </li> <li> <a href="#">安全</a> </li> <li> <a href="#">公益</a> </li> </ul> </div> <div id="tab-content"> <div style="display: block"> <ul> <li> <a href="#">八千家4S店参与双11</a> </li> <li> <a href="#">八千家4S店参与双11</a> </li> <li> <a href="#">八千家4S店参与双11</a> </li> <li> <a href="#">八千家4S店参与双11</a> </li> </ul> </div> <div style="display: none"> <ul> <li> <a href="#">谨防假冒客服诱导退款</a> </li> <li> <a href="#">谨防假冒客服诱导退款</a> </li> <li> <a href="#">谨防假冒客服诱导退款</a> </li> <li> <a href="#">谨防假冒客服诱导退款</a> </li> </ul> </div> <div style="display: none"> <ul> <li> <a href="#">阿里云运营智慧城市</a> </li> <li> <a href="#">阿里云运营智慧城市</a> </li> <li> <a href="#">阿里云运营智慧城市</a> </li> <li> <a href="#">阿里云运营智慧城市</a> </li> </ul> </div> <div style="display: none"> <ul> <li> <a href="#">故宫创意产品来袭啦</a> </li> <li> <a href="#">故宫创意产品来袭啦</a> </li> <li> <a href="#">故宫创意产品来袭啦</a> </li> <li> <a href="#">故宫创意产品来袭啦</a> </li> </ul> </div> <div style="display: none"> <ul> <li> <a href="#">阿里发布 YunOS 3.0</a> </li> <li> <a href="#">阿里发布 YunOS 3.0</a> </li> <li> <a href="#">阿里发布 YunOS 3.0</a> </li> <li> <a href="#">阿里发布 YunOS 3.0</a> </li> </ul> </div> </div> </div> </body> </html>
JS代码如下:
/** 如果你使用了JQuery,那下面这段话应该去掉 */ function $(id){ return typeof id=="string"?document.getElementById(id):id; } /** 页面加载时就执行 */ window.onload = function(){ var titleName = $("tab-title").getElementsByTagName("li"); var tabContent = $("tab-content").getElementsByTagName("div"); // 一个标题对应一个内容区域,所以这里肯定是相同的 if(titleName.length != tabContent.length){ return; } for(var i = 0;i<titleName.length;i++){ titleName[i].id = i; titleName[i].onmouseover = function(){ // 先把所有标题样式设置为空 for(var j = 0;j<titleName.length;j++){ titleName[j].className = ""; tabContent[j].style.display = "none" } // 再把当前选择的标题的样式设置为选择 this.className = "select"; tabContent[this.id].style.display = "block"; } } }
CSS代码如下:
*{ margin: 0; padding: 0; list-style: none; font-size: 12px; } .tab{ width: 298px; height: 98px; margin: 10px; border: 1px solid #eee; overflow: hidden; } .tab-title{ height: 27px; position: relative; background: #f7f7f7; } .tab-title ul{ position: absolute; width: 301px; left: -1; } .tab-title li{ float: left; width: 58px; height: 26px; line-height: 26px; text-align: center; padding: 0 1px; border-bottom: 1px solid #eee; overflow: hidden; } .tab li a:link,.tab li a:visited{ text-decoration: none; color: #000; } .tab li a:hover{ color:#f90; font-weight: 700; } .tab-title li.select{ background: #fff; border-bottom-color: #fff; border-left: 1px solid #eee; border-right: 1px solid #eee; padding: 0; } .tab .tab-content .tabct{ margin: 10px 10px 10px 19px; } .tab .tab-content .tabct ul li{ float: left; width: 134px; height: 25px; overflow: hidden; }
下载三个文件:
Java小强
未曾清贫难成人,不经打击老天真。
自古英雄出炼狱,从来富贵入凡尘。
发表评论: