HTML5-Tab标签

先举个例子,淘宝网首页截图:

这里公告,规则什么的就是Tab标签

css.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:pink ;
}.tab-title ul{position: absolute;width: 301px;left: -1;/*298+1*2=301-1*/
}.tab-title li{float: left;width: 58px;height: 26px;line-height: 26px;/*行高*/text-align: center;padding: 0 1px;border-bottom: 1px solid #eeeeee;overflow: hidden;}.tab li a:link,.tab-title li a:visited{text-decoration: none;/*下划线*/color: black;
}
.tab li a:hover{/*鼠标滑过事件*/color: red;font-weight: 700;/*加粗*/
}/*
内容处理*/
.tab-title li.select{background: #ffffff;border-bottom-color: #ffffff;border-left: 1px solid #eeeeee;border-right: 1px solid #eeeeee;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;
}

js.js

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;//加上idtitleName[i].onmouseover = function () {//鼠标划过事件for(var j = 0;j<titleName.length;j++){titleName[j].className ="";//先去掉所有的classtabContent[j].style.display = "none";//不显示}this.className = "select";//添加class(select)tabContent[this.id].style.display = "block";//显示}}
};

index.html

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>Tab切换</title><link type="text/css" href="css.css" rel="stylesheet"><script src="js.js"></script>
</head>
<body>
<div class="tab" id="tab"><div class="tab-title" id="tab-title"><ul><li class="select"><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 class="tab-content" id="tab-content"><div class="tabct" style="display: block"><!--display: block显示--><ul><li><a href="#">跟淘宝做件浪漫的事情</a></li><li><a href="#">英文媒体遇到中国羊年</a></li><li><a href="#">晒晒2014淘宝公益账单</a></li><li><a href="#">用手淘扫码比价过大年</a></li></ul></div><div class="tabct" style="display: none"><ul><li><a href="#">春节交易超时公告</a></li><li><a href="#">抽检新规已生效！</a></li><li><a href="#">1月发布新规汇总</a></li><li><a href="#">食品安全专题进行中</a></li></ul></div><div class="tabct" 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 class="tabct" 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 class="tabct" 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>
</div>
</body>
</html>

效果:

HTML5-Tab标签相关推荐

html5 css3 卡片切换,HTML5之纯CSS3实现的tab标签切换
HTML5的运用之纯CSS3实现的tab标签切换 CSS3代码实现的tab标签切换 *{padding:0px;margin:0px;} #tab{margin:20px;20px;position: ...
html5点击切换选项卡,简单纯js实现点击切换TAB标签实例
一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果使用方法: 1.将附件中的index ...
h5列表 php,常用的HTML5列表标签
这次给大家带来常用的HTML5列表标签,使用用HTML5列表标签的注意事项有哪些,下面就是实战案例,一起来看一下. 一.列表标签作用作用:给一堆数据添加列表语义,也就是告诉搜索引擎告诉浏览器这一堆数 ...
前端基础8：HTML5新增标签及CSS3新属性 viewport 动画
HTML5新增标签标签名描述 header 头部 section 区分大模块 nav 导航 footer 尾部 article 文章 aside 侧边栏 audio 音频 video 视频 fig ...
HTML5常见标签的使用以及DOM操作
一.HTML5的介绍 Web 技术发展时间线 1991 HTML 1994 HTML2 1996 CSS1 + JavaScript 1997 HTML4 1998 CSS2 2000 XHTML1( ...
04-前端技术_HTML与HTML5常用标签
目录一,HTML与HTML5常用标签学前准备 1,HTML简介 1.1 HTML是什么 1.2 HTML发展历史 1.3 HTML⽂档类型的设定 2,HTML基础语法 2.1 HTML基本结构: ...
html页面视频标签,html5基础标签(html5视频标签 html5新标签用法)
点评:html5基础,包括html5视频标签和html5新标签等标签用法,大家参考使用吧 1. 声明的变化 2. 指定字符编码的变化,html5中建议使用utf-8 3. Html5中允许没有 ...
html5新标签使用
HTML 5 视频标签<video> <video width="320" height="240" controls="contr ...
php tab标签,JavaScript代码分享：tab标签的切换
本文实例讲述了js实现点击切换TAB标签.分享给大家供大家参考.具体如下: 这里演示的选项卡效果代码,无jq,纯JS来实现,灰色风格,没有怎么美化,或许看上去比较普通,不过兼容性和操作起来挺舒服的,风 ...
php中 datalist,html5 datalist标签的用法是什么？这里有datalist标签的用法实例
本篇文章主要为大家讲述了关于html5 datalist标签的用法及html5 datalist标签的用法实例.本文说了两个常用的选项框的实例供大家选择观看,下面就让我们一起来看这篇文章吧我们先来看 ...

HTML5-Tab标签

HTML5-Tab标签相关推荐

最新文章

热门文章