仿360导航页面选项卡
2018-04-24 本文已影响35人
徵羽kid
选项卡在网页里很常见，特别是导航网站和新闻网站等，我通过借鉴360导航，制作了一个简单的选项卡。
1 概述
一个完整的选项卡应该包括当前选中选项，未选中的选项，每一次选中时都会出现一个与之其对应的内容界面。下面直接上代码，根据详细代码来说明。
2 原理
2.1 html和css布局部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
/* 初始化 */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
list-style: none;
overflow: hidden;
}
#main {
width: 300px;
border: 1px solid #ccc;
margin: 10px 10px;
}
#main h2 {
height: 35px;
line-height: 35px;
font-size: 14px;
color: green;
}
/* 选项 */
#main #tab {
width: 300px;
background-color: #fafafa;
}
#main #tab .tab-ul {
width: 300px;
clear: both;
overflow: hidden;
margin-left:-1px;
}
#main #tab .tab-ul li {
width: 75px;
height: 30px;
float: left;
border:1px solid #ccc;
line-height: 30px;
text-align: center;
}
#main #tab .tab-ul li a{
width: 75px;
height: 30px;
text-decoration: none;
}
/* 切换选项时的样式 */
#main #tab li.active {
border-top: 0;
border-bottom: 0;
border-top:3px solid green;
background: #fcfcfc;
}
/* 内容 */
#content ul {
width: 300px;
height: 200px;
display: none;
}
</style>
</head>
<body>
<div id="main">
<h2>猜你爱看</h2>
<div id="tab">
<ul class="tab-ul">
<li class="active"><a href="#">科技</a></li>
<li><a href="#">文化</a></li>
<li><a href="#">教育</a></li>
<li><a href="#">游戏</a></li>
</ul>
</div>
<div id="content">
<ul style="display: block;">
<li>
<h2></h2>
<p>内容请自行添加(～￣▽￣)～</p>
</li>
</ul>
<ul>
<li>
<h2></h2>
<p>内容请自行添加(～￣▽￣)～</p>
</li>
</ul>
<ul>
<li>
<h2></h2>
<p>内容请自行添加(～￣▽￣)～</p>
</li>
</ul>
<ul>
<li>
<h2></h2>
<p>内容请自行添加(～￣▽￣)～</p>
</li>
</ul>
</div>
</div>
</body>
</html>
在布局方面，要注意一个重点位置：
/* 切换选项时的样式 */
#main #tab li.active {
border-top: 0;
border-bottom: 0;
border-top:3px solid green;
background: #fcfcfc;
}
这个active就是我们切换选项时显示的样式，其实选项卡的原理很简单，就是切换选项时，让选中的选项的class变为这个激活时的active，然后就是要注意在content内容区，要在其ul元素内添加行间样式
style="display: block;"
然后在对应的内部样式表里将ul设置
style="display: none;"
2.2 JS部分
window.onload=function () {
var tab=document.getElementById('tab');
var content=document.getElementById('content');
var aLi=tab.getElementsByTagName('li');
var aUl=content.getElementsByTagName('ul');
var now=content.getElementsByTagName('h2');
var oDate=new Date();
var aTops=['科技新闻','文化新闻','教育新闻','游戏新闻'];
/* 根据上面数组的数据和当前日期，将其输出到h2标签内 */
for(var k=0;k<now.length;k++) {
now[k].innerHTML=(oDate.getMonth()+1)+'月'+oDate.getDate()+'日'+aTops[k];
}
/* 选项卡功能实现 */
for(var i=0;i<aLi.length;i++) {
aLi[i].index=i;
aLi[i].onclick=function () {
for(var j=0;j<aLi.length;j++) {
aLi[j].className='';
aUl[j].style.display='none';
}
this.className='active';
aUl[this.index].style.display='block';
}
}
};
js部分的原理其实也很简单，主要分三步：
第一步，用外层for循环为aLi的每一个li元素创建一个onclick点击事件，并将当前的i复制给index计数器变量;
第二步，为onclick点击事件创建一个匿名函数，并在其内使用for循环，循环内部将aLi当前的className设置为空字符串，并将其对应的 aUl设置隐藏。
第三步，匿名函数循环的外面，将aLi当前的className设置为'active',同时对应的 aUl设置显示，这里要使用this运算符和前面创建的index计数器变量。
OK，选项卡完成，经检验没有bug，可以放心食用(～￣▽￣)～
3 完整代码
下面是该实例的完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
/* 初始化 */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
list-style: none;
overflow: hidden;
}
#main {
width: 300px;
border: 1px solid #ccc;
margin: 10px 10px;
}
#main h2 {
height: 35px;
line-height: 35px;
font-size: 14px;
color: green;
}
/* 选项 */
#main #tab {
width: 300px;
background-color: #fafafa;
}
#main #tab .tab-ul {
width: 300px;
clear: both;
overflow: hidden;
margin-left:-1px;
}
#main #tab .tab-ul li {
width: 75px;
height: 30px;
float: left;
border:1px solid #ccc;
line-height: 30px;
text-align: center;
}
#main #tab .tab-ul li a{
width: 75px;
height: 30px;
text-decoration: none;
}
/* 切换选项时的样式 */
#main #tab li.active {
border-top: 0;
border-bottom: 0;
border-top:3px solid green;
background: #fcfcfc;
}
/* 内容 */
#content ul {
width: 300px;
height: 200px;
display: none;
}
</style>
<script>
window.onload=function () {
var tab=document.getElementById('tab');
var content=document.getElementById('content');
var aLi=tab.getElementsByTagName('li');
var aUl=content.getElementsByTagName('ul');
var now=content.getElementsByTagName('h2');
var oDate=new Date();
var aTops=['科技新闻','文化新闻','教育新闻','游戏新闻'];
/* 根据上面数组的数据和当前日期，将其输出到h2标签内 */
for(var k=0;k<now.length;k++) {
now[k].innerHTML=(oDate.getMonth()+1)+'月'+oDate.getDate()+'日'+aTops[k];
}
/* 选项卡功能实现 */
for(var i=0;i<aLi.length;i++) {
aLi[i].index=i;
aLi[i].onclick=function () {
for(var j=0;j<aLi.length;j++) {
aLi[j].className='';
aUl[j].style.display='none';
}
this.className='active';
aUl[this.index].style.display='block';
}
}
};
</script>
</head>
<body>
<div id="main">
<h2>猜你爱看</h2>
<div id="tab">
<ul class="tab-ul">
<li class="active"><a href="#">科技</a></li>
<li><a href="#">文化</a></li>
<li><a href="#">教育</a></li>
<li><a href="#">游戏</a></li>
</ul>
</div>
<div id="content">
<ul style="display: block;">
<li>
<h2></h2>
<p>内容请自行添加(～￣▽￣)～</p>
</li>
</ul>
<ul>
<li>
<h2></h2>
<p>内容请自行添加(～￣▽￣)～</p>
</li>
</ul>
<ul>
<li>
<h2></h2>
<p>内容请自行添加(～￣▽￣)～</p>
</li>
</ul>
<ul>
<li>
<h2></h2>
<p>内容请自行添加(～￣▽￣)～</p>
</li>
</ul>
</div>
</div>
</body>
</html>
