HTML Tab选项卡

我要做的效果如图所示：

代码如下：

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>选项卡</title><link href="css/index.css" rel="stylesheet"><script src="js/index.js" type="text/javascript"></script>
</head>
<body><!--选项卡--><div id="tab"><!--选项的头部--><div id="tab-header"><ul><li class="selected">公告</li><li>规则</li><li>完美</li><li>功劳</li><li>产品</li><!--<li>技术</li>--></ul></div><!--主要内容--><div id="tab-content"><div class="dom" style="display: block;"><ul><li><a href="#">数据七夕:金牛爱送玫瑰</a></li><li><a href="#">阿里打造"互联网监管"</a></li><li><a href="#">10万家店60万新品</a></li><li><a href="#">全球最大网上时装周</a></li></ul></div><div class="dom"><ul><li><a href="#">“全额返现”要管控啦</a></li><li><a href="#">淘宝新规发布汇总(7月)</a></li><li><a href="#">炒信规则调整意见反馈</a></li><li><a href="#">质量相关规则近期变更</a></li></ul></div><div class="dom"><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="dom"><ul><li><a href="#">接次文件，毁了一家店</a></li><li><a href="#">账号安全神器阿里钱盾</a></li><li><a href="#">新版阿里110上线了</a></li><li><a href="#">卖家学违禁避免被处罚</a></li></ul></div><div class="dom"><ul><li><a href="#">为了公益high起来</a></li><li><a href="#">魔豆妈妈在线申请</a></li></ul></div></div></div>
</body>
</html>

index.css

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{padding: 0;margin: 0;
}a{color: black;text-decoration: none;
}
ul{list-style: none;
}#tab{width: 498px;height: 130px;border: 1px solid #ddd;box-shadow: 0 0 2px #ddd;margin: 100px 0 0 100px;/*处理超出的内容*/overflow: hidden;
}/*选项卡的头部*/
#tab-header{background-color: #F7F7F7;height: 33px;text-align: center;position: relative;
}
#tab-header ul{width: 500px;position: absolute;left: -1px;
}
#tab-header ul li{float: left;width: 98px;height: 33px;line-height: 33px;padding: 0 1px;border-bottom: 1px solid #dddddd;
}
#tab-header ul li.selected{background-color: white;font-weight: bolder;border-bottom: 0;border-left: 1px solid #dddddd;border-right: 1px solid #dddddd;padding: 0;}#tab-header ul li:hover{color: orangered;
}/*主要内容*/
#tab-content .dom{display: none;
}#tab-content .dom ul li{float: left;/*background-color: red;*/margin: 15px 10px;width: 225px;
}#tab-content .dom ul li a:hover{color: orange;
}

index.js

// == 值比较  === 类型比较 $(id) ---->  document.getElementById(id)
function $(id){return typeof id === 'string' ? document.getElementById(id):id;
}// 当页面加载完毕
window.onload = function(){// 拿到所有的标题(li标签) 和 标题对应的内容(div)var titles = $('tab-header').getElementsByTagName('li');var divs = $('tab-content').getElementsByClassName('dom');// 判断if(titles.length != divs.length) return;// 遍历for(var i=0; i<titles.length; i++){// 取出li标签var li = titles[i];li.id = i;
//        console.log(li);// 监听鼠标的移动li.onmousemove = function(){for(var j=0; j<titles.length; j++){titles[j].className = '';divs[j].style.display = 'none';}this.className = 'selected';divs[this.id].style.display = 'block';}}}

HTML Tab选项卡相关推荐

动感效果的TAB选项卡 jquery 插件
动感效果的TAB选项卡 jquery 插件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
【Android UI设计与开发】第11期：顶部标题栏（二）ActionBar实现Tab选项卡和下拉导航列表
转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9050573 在上一篇文章中,我们只是大概的了解了一下关于ActionBar ...
用fieldset标签轻松实现Tab选项卡效果
fieldset是一个不常用的HTML标签,它可以将表单内的元素分组显示,legend标签为 fieldset 元素定义标题.由于各浏览器在显示fieldset和legend结构时会自动为其添加边框和 ...
layui tab选项卡外部html页面,layui的Tab选项卡知识
layui的公共类: lay-filter=" " 事件过滤器.你可能会在很多地方看到他,他一般是用于监听特定的自定义事件.你可以把它看作是一个ID选择器 layui的公共属性: ...
html tab选项卡控件,tab选项卡插件
这是一款使用十分方便的.为移动设备定制的.可在水平和垂直两个方向上显示的jQuery和css3响应式tab选项卡插件.在你要显示很多不同的内容时,tab选项卡导航方式是十分有用的.常见的方式是在同一个 ...
iOS开发-iPad侧边栏Tab选项卡切换
Android中习惯了叫侧边栏,iOS中如果不习惯侧边栏称呼的话可以叫dock,侧边栏的切换,类似于Android中的底部导航栏的切换,iPad尺寸大了一些,导航的栏目放在侧边会显示的更好耐看一些.选 ...
ViewPager+Fragment实现TabHost，Fragment动态添加、删除，Tab选项卡跟随滑动
效果图: 代码功能: (1)用ViewPager+Fragment实现TabHost,ViewPager的每一个Page均是Fragment.ViewPager中的Fragment可以动态添加.删除. ...
漂亮的jQuery tab选项卡插件
清远大学城网(http://www.qydxc.com) tab选项卡在实际应用中几乎到处可见,像现在大型网站163,QQ,新浪,淘宝都使用了tab选项卡效果,下面我来介绍一款jQuery tab选项 ...
MUI tab选项卡之间的切换和数据获取
查看mui官网上面的例子,会看到有多种tab 选项卡的例子,我就写下我用到的tab选项卡.写了个简单的例子,效果如下图主页面的代码 <nav class="mui-bar mui-b ...
jQuery封装tab选项卡组件(自定义自动功能和延迟显示功能）
效果图 tab.html <!DOCTYPE html> <html lang="zh-CN"> <head ...

HTML Tab选项卡

HTML Tab选项卡相关推荐

最新文章

热门文章