31-Tab选项卡
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了31-Tab选项卡，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3184字，纯文字阅读大概需要5分钟。
内容图文
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入外部的样式-->
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<div id="tab">
<!--头部-->
<div id="tab-header">
<ul>
<li class="selected">公告</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>
<script src="js/index.js"></script>
</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{
margin:0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
body{
margin: 100px;
}
#tab{
border:1px solid #dddddd;
width: 498px;
height: 120px;
/*裁剪超出部分*/
overflow: hidden;
}
#tab-header{
height: 38px;
line-height: 38px;
background-color: #F7F7F7;
text-align: center;
position: relative;
}
#tab-header ul{
width: 501px;
position: absolute;
left:-1px;
}
#tab-header ul li{
float: left;
/*background-color: red;*/
width: 98px;
/*内填充*/
padding: 0 1px;
/*下线*/
border-bottom: 1px solid #dddddd;
}
#tab-header ul li.selected{
background-color: white;
/*下线*/
border-bottom: 0;
/*内填充*/
padding: 0;
/*设置左右线条*/
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
}
#tab-content .dom{
display: none;
}
#tab-content .dom a{
/*background-color: red;*/
width: 220px;
/*左浮动*/
float: left;
margin:8px;
}
index.js
function $(id) {
// 类型的比较
return typeof id === 'string' ? document.getElementById(id): id;
}
// 当网页加载完毕是调用
window.onload = function () {
// 拿到所有的li标签和对应的内容
var lis = $('tab-header').getElementsByTagName('li');
var contents = $('tab-content').getElementsByClassName('dom');
// console.log(lis, contents);
// 验证
if(lis.length !== contents.length) return;
// 遍历
for(var i=0; i<lis.length; i++){
// 取出每一个li标签
var li = lis[i];
// console.log(li);
li.id = i;
// 监听鼠标在li上面的移动
li.onmousemove = function () {
for(var j=0; j<lis.length; j++){
//让所有的li标签都不被选中
lis[j].className = '';
contents[j].style.display = 'none';
}
// 设置当前对象的className
this.className = 'selected';
contents[this.id].style.display = 'block';
}
}
}
内容总结
以上是互联网集市为您收集整理的31-Tab选项卡全部内容，希望文章能够帮你解决31-Tab选项卡所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】