js实现选项卡(Tab)
Posted 萧家大公子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现选项卡(Tab)相关的知识，希望对你有一定的参考价值。
一 . 采用编译器
1. WebStorm编译器
二. 实现的步骤
1. 创建目录(2个)
2. 创建目录对应的文件(3个)
3. 分别将css的文件和js的文件引入html文件中
三. 文件目录展示图
四. 选项卡效果图
五. Html中的代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab切换</title>
<!--引入css的文件-->
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<!--选项卡-->
<div id="tab">
<!--头部-->
<div id="tab-header" class="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>
<!--引入js的文件-->
<script src="js/index.js"></script>
</body>
</html>六. css中的代码
1. css中设置的代码主要是对html中的标签属性进行相关设置(颜色;位置等)—>注意:如果其中的属性不是很明白,可以通过w3c查询可以得知.
/*清空多余的间距*/
*
padding: 0px;
margin: 0px;
/*处理选项卡背景*/
body
margin: 80px;
/*除去li的圆点*/
ul
list-style: none;
#tab
/*设置边框*/
border: 1px solid #dddddd;
/*设置宽度*/
width: 498px;
/*设置高度*/
height: 130px;
/*设置头部*/
#tab-header
/*设置高度*/
height: 38px;
/*设置背景颜色*/
background-color: #f7f7f7;
/*设置定位*/
position: relative;
/*设置ul*/
.tab-header ul
/*设置宽度*/
width: 501px;
/*定位*/
position: absolute;
/*设置竖线合并*/
left: -1px;
/*设置li标签*/
.tab-header ul li
/*浮动*/
float: left;
/*宽度*/
width: 98px;
/*高度*/
height: 38px;
/*垂直居中*/
line-height: 38px;
/*居中*/
text-align: center;
/*设置内边距*/
padding: 0px 1px;
/*下边框*/
border-bottom: 1px solid #dddddd;
/*设置里面的第一个选中的li标签*/
#tab-header ul li.selected
background-color: white;
/*下边框*/
border-bottom: 0px;
/*左边框*/
border-left: 1px solid #dddddd;
/*右边框*/
border-right: 1px solid #dddddd;
/*清除内部的边距*/
padding: 0px;
/*设置li标签的伪类*/
.tab-header ul li:hover
font-weight: bold;
color: orangered;
/*中间的内容*/
#tab-content ul
margin-top: 10px;
/*设置a标签*/
a
/*设置字体颜色*/
color: black;
/*除去下划线*/
text-decoration: none;
/*设置中间内容的li标签*/
#tab-content li
/*设置浮动位置*/
float: left;
/*设置宽度*/
width: 220px;
/*间距设置*/
margin: 10px;
/*设置中间内容的伪类*/
#tab-content a:hover
color: orangered;
/*设置让超出父控件的内容隐藏*/
#tab-content .dom
display: none;
七. js文件中的代码(代码内部都已经对相关代码注释了)
1. 目的 : 实现选项卡的效果
//jQ
function $(id)
return typeof id === 'string' ? document.getElementById(id) : id;
window.onload = function ()
//1.获取头部所有的li标签和中间内容标签
var lis = $('tab-header').getElementsByTagName('li');
var content = $('tab-content').getElementsByClassName('dom');
//打印是否获取了相应的内容
// console.log(lis, content);
//判断
if (lis.length != content.length) return;
//遍历监听鼠标在头部上的移动
for (var i = 0; i < lis.length; i++)
//移除单独的li标签
var li = lis[i];
//绑定id(负责选中的)
li.id = i;
//监听鼠标在li上的移动
li.onmousemove = function ()
for (var j = 0; j < lis.length; j++)
//清除class
lis[j].className = '';
//让所有的内容隐藏
content[j].style.display = 'none';
//设置className
this.className = 'selected';
//设置内容显示
content[this.id].style.display = 'block';
八. 总结
1. 最近学习的js,附上写的一个选项卡案例,大家有什么不明白的地方,可以给我留言,谢谢!!!!
以上是关于js实现选项卡(Tab)的主要内容，如果未能解决你的问题，请参考以下文章