jacascript 原生选项卡插件
前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！
在布局的时候，想到了很多以前看到过的案例，再次熟悉一下：
- a链接之间的竖线：可以用a链接的border-right/left; 也可以直接 | ；还可以再加个行内元素，用它的border-right/left，
- 我这里在a链接之间加了个i，在结尾处有1px的误差，以后再处理;
- a链接（行内元素）之间的间隙，可以用浮动解决； 也可以把元素的首尾互相连接；
- 某一板块，不论点击哪里都会跳转：可以直接用a链接包住；也可以用a链接遮罩；
代码都写在一起，很乱，命名也不规范，还有很多不足；
第一种原型是直接写的，第二种原型是字面对象的；
继续学习下用立即函数的写法，以后在贴上来；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡原生插件</title>
<style type="text/css">
/*重置样式*/
*{
padding: 0;
margin: 0;
}
body{
font: 14px/100% arial,"Hiragino Sans GB","Hiragino Sans GB W3";
}
li{
list-style: none;
}
a{
color: #333;
text-decoration: none;
}
.clearfix:before, /*:before处理margin上下重叠*/
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
/*选项卡样式*/
.tab_wrapper_test1,.tab_wrapper_test2{
width: 480px;
height: 400px;
margin: 50px auto;
border: 1px solid #ccc;
position: relative;
}
.prev,.next{
width: 30px;
height: 30px;
background: rgba(0,0,0,0.3);
position: absolute;
z-index: 999;
top: 190px;
color: #fff;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 18px;
font-family: SimSun, Arial;
}
.prev{
left: 15px;
}
.next{
right: 15px;
}
.tab_menu{
font-size: 18px;
height: 49px;
margin-right: -1px;
border-bottom: 1px solid #ccc;
overflow: hidden;
}
.tab_menu a{
display: inline-block;
text-align: center;
line-height: 50px;
padding: 0 10px;
width: 39px;
}
.border_right{
border-right: 1px solid #ccc;
}
.menu_active{
background: #0ff;
}
.tab_content{
height: 350px;
}
.tab_con_item{
display: none;
}
.con_active{
display: block;
}
/*第一页*/
.tab_con_href_half{
display: block;
text-align: center;
height: 310px;
line-height: 310px;
}
.tab_con_href_half img{
max-width: 100%;
vertical-align: middle;
}
.tab_con_txt_half{
border-top: 1px solid #ccc;
height: 39px;
text-align: center;
line-height: 40px;
font-size: 18px;
}
/*第二页*/
.tab_con_href_all{
display: block;
text-align: center;
overflow: hidden;
}
.tab_con_href_all img{
height: 350px;
}
.tab_con_txt_all{
position: absolute;
bottom: 0;
height: 39px;
width: 100%;
/*绝对定位之后，可以用width：100%，来扩宽，然后text-align:center; 水平居中*/
text-align: center;
line-height: 40px;
font-size: 18px;
background: rgba(0,0,0,0.6);
}
.tab_con_txt_all a{
color: #fff;
}
/*第三页、第四页、第五页*/
.tab_con_href_mask_li{
text-align: center;
height: 350px;
position: relative;
}
.tab_con_href_mask_img{
height: 310px;
line-height: 310px;
overflow: hidden;
}
.tab_con_href_mask_img img{
max-width: 100%;
vertical-align: middle;
}
.tab_con_mask_txt{
border-top: 1px solid #ccc;
height: 39px;
text-align: center;
line-height: 40px;
font-size: 18px;
}
.tab_con_href_mask{
position: absolute;
display: block;
width: 100%;
height: 350px;
top: 0;
left: 0;
z-index: 998;
}
/*第四页*/
.tab_con_href_mask_img_4{
height: 350px;
overflow: hidden;
}
.tab_con_href_mask_img_4 img{
height: 350px;
}
.tab_con_mask_txt_4{
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0,0,0,0.6);
text-align: center;
border-top: 1px solid #ccc;
height: 39px;
line-height: 40px;
font-size: 18px;
}
.tab_con_mask_txt_4 a{
color: #fff;
}
</style>
</head>
<body>
<div class="tab_wrapper_test1">
<div class="tab_menu">
<a href="javascript:;" class="menu_active">热点
</a><i class="border_right"></i><a href="javascript:;">社会
</a><i class="border_right"></i><a href="javascript:;">娱乐
</a><i class="border_right"></i><a href="javascript:;">军事
</a><i class="border_right"></i><a href="javascript:;">体育
</a><i class="border_right"></i><a href="javascript:;">财经
</a><i class="border_right"></i><a href="javascript:;">汽车
</a><i class="border_right"></i><a href="javascript:;">游戏</a>
<!--这里的i是那个a之间的竖线，可以用a的border-right做，也可以直接写个| -->
<!--inline-block之间有间隙，解决方法有：压缩代码、浮动、标签前后折叠-->
</div>
<div class="tab_content">
<ul>
<li class="tab_con_item con_active">
<!--这里我用了3种方式写最外层的a链接-->
<a href="javascript:;" class="tab_con_href_half">
<!--a链接只包住图片-->
<img src="data:images/1.jpg" title="girl" alt="girl"/>
</a>
<div class="tab_con_txt_half">
<a href="javascript:;">美丽女孩人人爱</a>
</div>
</li>
<li class="tab_con_item ">
<a href="javascript:;" class="tab_con_href_all">
<!--a链接只包住所有-->
<img src="data:images/cat.jpeg" title="cat" alt="cat"/>
<div class="tab_con_txt_all">
<a href="javascript:;">可爱猫咪</a>
</div>
</a>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img">
<img src="data:images/xiaoxin.gif" title="蜡笔小新" alt="蜡笔小新"/>
</div>
<div class="tab_con_mask_txt">
<a href="javascript:;">动感超人biu biu</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img_4">
<img src="data:images/2.jpg" title="帅哥" alt="帅哥"/>
</div>
<div class="tab_con_mask_txt_4">
<a href="javascript:;">帅男</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img_4">
<img src="data:images/cat3.jpg" title="猫咪" alt="猫咪"/>
</div>
<div class="tab_con_mask_txt_4">
<a href="javascript:;">猫咪</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img_4">
<img src="data:images/cat2.jpg" title="猫咪" alt="猫咪"/>
</div>
<div class="tab_con_mask_txt_4">
<a href="javascript:;">猫咪</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img_4">
<img src="data:images/cat3.jpg" title="猫咪" alt="猫咪"/>
</div>
<div class="tab_con_mask_txt_4">
<a href="javascript:;">猫咪</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img_4">
<img src="data:images/cat.jpeg" title="猫咪" alt="猫咪"/>
</div>
<div class="tab_con_mask_txt_4">
<a href="javascript:;">猫咪</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
</ul>
</div>
<!--这里的箭头可以用图片，也可以用纯css代码，也可以用转义字符+SimSun字体-->
<a href="javscript:;" class="prev"><</a>
<a href="javscript:;" class="next">></a>
</div>
<div class="tab_wrapper_test2">
<div class="tab_menu">
<a href="javascript:;" class="menu_active">热点
</a><i class="border_right"></i><a href="javascript:;">社会
</a><i class="border_right"></i><a href="javascript:;">娱乐
</a><i class="border_right"></i><a href="javascript:;">军事
</a><i class="border_right"></i><a href="javascript:;">体育
</a><i class="border_right"></i><a href="javascript:;">财经
</a><i class="border_right"></i><a href="javascript:;">汽车
</a><i class="border_right"></i><a href="javascript:;">游戏</a>
<!--这里的i是那个a之间的竖线，可以用a的border-right做，也可以直接写个| -->
<!--inline-block之间有间隙，解决方法有：压缩代码、浮动、标签前后折叠-->
</div>
<div class="tab_content">
<ul>
<li class="tab_con_item con_active">
<!--这里我用了3种方式写最外层的a链接-->
<a href="javascript:;" class="tab_con_href_half">
<!--a链接只包住图片-->
<img src="data:images/1.jpg" title="girl" alt="girl"/>
</a>
<div class="tab_con_txt_half">
<a href="javascript:;">美丽女孩人人爱</a>
</div>
</li>
<li class="tab_con_item ">
<a href="javascript:;" class="tab_con_href_all">
<!--a链接只包住所有-->
<img src="data:images/cat.jpeg" title="cat" alt="cat"/>
<div class="tab_con_txt_all">
<a href="javascript:;">可爱猫咪</a>
</div>
</a>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img">
<img src="data:images/xiaoxin.gif" title="蜡笔小新" alt="蜡笔小新"/>
</div>
<div class="tab_con_mask_txt">
<a href="javascript:;">动感超人biu biu</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img_4">
<img src="data:images/2.jpg" title="帅哥" alt="帅哥"/>
</div>
<div class="tab_con_mask_txt_4">
<a href="javascript:;">帅男</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img_4">
<img src="data:images/cat3.jpg" title="猫咪" alt="猫咪"/>
</div>
<div class="tab_con_mask_txt_4">
<a href="javascript:;">猫咪</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img_4">
<img src="data:images/cat2.jpg" title="猫咪" alt="猫咪"/>
</div>
<div class="tab_con_mask_txt_4">
<a href="javascript:;">猫咪</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img_4">
<img src="data:images/cat3.jpg" title="猫咪" alt="猫咪"/>
</div>
<div class="tab_con_mask_txt_4">
<a href="javascript:;">猫咪</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img_4">
<img src="data:images/cat.jpeg" title="猫咪" alt="猫咪"/>
</div>
<div class="tab_con_mask_txt_4">
<a href="javascript:;">猫咪</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
</ul>
</div>
<!--这里的箭头可以用图片，也可以用纯css代码，也可以用转义字符+SimSun字体-->
<a href="javscript:;" class="prev"><</a>
<a href="javscript:;" class="next">></a>
</div>
<script type="text/javascript">
window.onload = function(){
function TabControl(obj){
//选项卡菜单控制部分
this.oMenu = obj.getElementsByClassName('tab_menu')[0];
this.menuItem = this.oMenu.getElementsByTagName('a');
//前后控制按钮
this.prev = obj.getElementsByClassName('prev')[0];
this.next = obj.getElementsByClassName('next')[0];
//选项卡内容部分
this.con = obj.getElementsByClassName('tab_content')[0];
this.conItem = this.con.getElementsByClassName('tab_con_item');
//变量设置
//选项卡页数
this.count = this.conItem.length;
//当前第几页，默认为第一页，也就是0
this.current = 0;
//这里不要忘了var
var that = this;
//原型方法
//构造函数执行到这里的时候，会判断实例是否有menuSwitch方法，
//第一次执行构造函数时，实例是没有menuSwitch方法的，就执行if方法块的代码；
//之后再执行此构造函数时，原型上已经有这个方法了，就不会进入
//原型上的方法有很多，但是只用检测一个就行了，没必要都检测
if(typeof this.menuSwitch != 'function'){
//菜单控制
TabControl.prototype.menuSwitch = function(){
//清空所有class名
for(var j = 0;j < this.count; j++){
this.menuItem[j].className = '';
this.conItem[j].className = 'tab_con_item';
}
//给当前页添加class名
this.menuItem[this.current].className = 'menu_active';
this.conItem[this.current].className = 'tab_con_item con_active';
};
//前按钮控制
TabControl.prototype.btnPrevSwitch = function(){
if(this.current > 0){
//清空前页class名
this.menuItem[this.current].className = '';
this.conItem[this.current].className = 'tab_con_item';
//页数自减1
this.current--;
//当前页添加class名
this.menuItem[this.current].className = 'menu_active';
this.conItem[this.current].className = 'tab_con_item con_active';
}else if(this.current == 0){
//清空前页class名
this.menuItem[this.current].className = '';
this.conItem[this.current].className = 'tab_con_item';
//页数跳转至最后一页
this.current = this.count-1;
//当前页添加class名
this.menuItem[this.current].className = 'menu_active';
this.conItem[this.current].className = 'tab_con_item con_active';
}
};
//后按钮控制
TabControl.prototype.btnNextSwitch = function(){
if(this.current < this.count-1){
//清空前页class名
this.menuItem[this.current].className = '';
this.conItem[this.current].className = 'tab_con_item';
//页数自增1
this.current++;
//当前页添加class名
this.menuItem[this.current].className = 'menu_active';
this.conItem[this.current].className = 'tab_con_item con_active';
}else if(this.current == this.count-1){
//清空前页class名
this.menuItem[this.current].className = '';
this.conItem[this.current].className = 'tab_con_item';
//页数跳转至第一页
this.current = 0;
//当前页添加class名
this.menuItem[this.current].className = 'menu_active';
this.conItem[this.current].className = 'tab_con_item con_active';
}
};
}
//菜单控制事件
for(var i = 0; i < this.count; i++){
//设置当前索引，这种设置方法需掌握
this.menuItem[i].index = i;
this.menuItem[i].onclick = function(){
that.current = this.index;
that.menuSwitch();
}
}
//前按钮控制
this.prev.onclick = function(){
that.btnPrevSwitch();
}
//后按钮控制
this.next.onclick = function(){
that.btnNextSwitch();
}
//自循环
var autoTimer = null;
//直接执行
autoTimer = setInterval(function(){
that.btnNextSwitch();
},2000);
//进入选项卡，清空计时器
obj.onmouseover = function(){
clearInterval(autoTimer);
}
//离开选项卡，计时器开始工作
obj.onmouseout = function(){
autoTimer = setInterval(function(){
that.btnNextSwitch();
},2000);
}
}
var oTab1 = document.getElementsByClassName('tab_wrapper_test1')[0];
var tab1 = new TabControl(oTab1);
var oTab2 = document.getElementsByClassName('tab_wrapper_test2')[0];
var tab2 = new TabControl(oTab2);
}
</script>
</body>
</html>
第二种，原型是字面对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡原生插件</title>
<style type="text/css">
/*重置样式*/
*{
padding: 0;
margin: 0;
}
body{
font: 14px/100% arial,"Hiragino Sans GB","Hiragino Sans GB W3";
}
li{
list-style: none;
}
a{
color: #333;
text-decoration: none;
}
.clearfix:before, /*:before处理margin上下重叠*/
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
/*选项卡样式*/
.tab_wrapper_test1,.tab_wrapper_test2{
width: 480px;
height: 400px;
margin: 50px auto;
border: 1px solid #ccc;
position: relative;
}
.prev,.next{
width: 30px;
height: 30px;
background: rgba(0,0,0,0.3);
position: absolute;
z-index: 999;
top: 190px;
color: #fff;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 18px;
font-family: SimSun, Arial;
}
.prev{
left: 15px;
}
.next{
right: 15px;
}
.tab_menu{
font-size: 18px;
height: 49px;
margin-right: -1px;
border-bottom: 1px solid #ccc;
overflow: hidden;
}
.tab_menu a{
display: inline-block;
text-align: center;
line-height: 50px;
padding: 0 10px;
width: 39px;
}
.border_right{
border-right: 1px solid #ccc;
}
.menu_active{
background: #0ff;
}
.tab_content{
height: 350px;
}
.tab_con_item{
display: none;
}
.con_active{
display: block;
}
/*第一页*/
.tab_con_href_half{
display: block;
text-align: center;
height: 310px;
line-height: 310px;
}
.tab_con_href_half img{
max-width: 100%;
vertical-align: middle;
}
.tab_con_txt_half{
border-top: 1px solid #ccc;
height: 39px;
text-align: center;
line-height: 40px;
font-size: 18px;
}
/*第二页*/
.tab_con_href_all{
display: block;
text-align: center;
overflow: hidden;
}
.tab_con_href_all img{
height: 350px;
}
.tab_con_txt_all{
position: absolute;
bottom: 0;
height: 39px;
width: 100%;
/*绝对定位之后，可以用width：100%，来扩宽，然后text-align:center; 水平居中*/
text-align: center;
line-height: 40px;
font-size: 18px;
background: rgba(0,0,0,0.6);
}
.tab_con_txt_all a{
color: #fff;
}
/*第三页、第四页、第五页*/
.tab_con_href_mask_li{
text-align: center;
height: 350px;
position: relative;
}
.tab_con_href_mask_img{
height: 310px;
line-height: 310px;
overflow: hidden;
}
.tab_con_href_mask_img img{
max-width: 100%;
vertical-align: middle;
}
.tab_con_mask_txt{
border-top: 1px solid #ccc;
height: 39px;
text-align: center;
line-height: 40px;
font-size: 18px;
}
.tab_con_href_mask{
position: absolute;
display: block;
width: 100%;
height: 350px;
top: 0;
left: 0;
z-index: 998;
}
/*第四页*/
.tab_con_href_mask_img_4{
height: 350px;
overflow: hidden;
}
.tab_con_href_mask_img_4 img{
height: 350px;
}
.tab_con_mask_txt_4{
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0,0,0,0.6);
text-align: center;
border-top: 1px solid #ccc;
height: 39px;
line-height: 40px;
font-size: 18px;
}
.tab_con_mask_txt_4 a{
color: #fff;
}
</style>
</head>
<body>
<div class="tab_wrapper_test1">
<div class="tab_menu">
<a href="javascript:;" class="menu_active">热点
</a><i class="border_right"></i><a href="javascript:;">社会
</a><i class="border_right"></i><a href="javascript:;">娱乐
</a><i class="border_right"></i><a href="javascript:;">军事
</a><i class="border_right"></i><a href="javascript:;">体育
</a><i class="border_right"></i><a href="javascript:;">财经
</a><i class="border_right"></i><a href="javascript:;">汽车
</a><i class="border_right"></i><a href="javascript:;">游戏</a>
<!--这里的i是那个a之间的竖线，可以用a的border-right做，也可以直接写个| -->
<!--inline-block之间有间隙，解决方法有：压缩代码、浮动、标签前后折叠-->
</div>
<div class="tab_content">
<ul>
<li class="tab_con_item con_active">
<!--这里我用了3种方式写最外层的a链接-->
<a href="javascript:;" class="tab_con_href_half">
<!--a链接只包住图片-->
<img src="data:images/1.jpg" title="girl" alt="girl"/>
</a>
<div class="tab_con_txt_half">
<a href="javascript:;">美丽女孩人人爱</a>
</div>
</li>
<li class="tab_con_item ">
<a href="javascript:;" class="tab_con_href_all">
<!--a链接只包住所有-->
<img src="data:images/cat.jpeg" title="cat" alt="cat"/>
<div class="tab_con_txt_all">
<a href="javascript:;">可爱猫咪</a>
</div>
</a>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img">
<img src="data:images/xiaoxin.gif" title="蜡笔小新" alt="蜡笔小新"/>
</div>
<div class="tab_con_mask_txt">
<a href="javascript:;">动感超人biu biu</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img_4">
<img src="data:images/2.jpg" title="帅哥" alt="帅哥"/>
</div>
<div class="tab_con_mask_txt_4">
<a href="javascript:;">帅男</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img_4">
<img src="data:images/cat3.jpg" title="猫咪" alt="猫咪"/>
</div>
<div class="tab_con_mask_txt_4">
<a href="javascript:;">猫咪</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img_4">
<img src="data:images/cat2.jpg" title="猫咪" alt="猫咪"/>
</div>
<div class="tab_con_mask_txt_4">
<a href="javascript:;">猫咪</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img_4">
<img src="data:images/cat3.jpg" title="猫咪" alt="猫咪"/>
</div>
<div class="tab_con_mask_txt_4">
<a href="javascript:;">猫咪</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img_4">
<img src="data:images/cat.jpeg" title="猫咪" alt="猫咪"/>
</div>
<div class="tab_con_mask_txt_4">
<a href="javascript:;">猫咪</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
</ul>
</div>
<!--这里的箭头可以用图片，也可以用纯css代码，也可以用转义字符+SimSun字体-->
<a href="javscript:;" class="prev"><</a>
<a href="javscript:;" class="next">></a>
</div>
<div class="tab_wrapper_test2">
<div class="tab_menu">
<a href="javascript:;" class="menu_active">热点
</a><i class="border_right"></i><a href="javascript:;">社会
</a><i class="border_right"></i><a href="javascript:;">娱乐
</a><i class="border_right"></i><a href="javascript:;">军事
</a><i class="border_right"></i><a href="javascript:;">体育
</a><i class="border_right"></i><a href="javascript:;">财经
</a><i class="border_right"></i><a href="javascript:;">汽车
</a><i class="border_right"></i><a href="javascript:;">游戏</a>
<!--这里的i是那个a之间的竖线，可以用a的border-right做，也可以直接写个| -->
<!--inline-block之间有间隙，解决方法有：压缩代码、浮动、标签前后折叠-->
</div>
<div class="tab_content">
<ul>
<li class="tab_con_item con_active">
<!--这里我用了3种方式写最外层的a链接-->
<a href="javascript:;" class="tab_con_href_half">
<!--a链接只包住图片-->
<img src="data:images/1.jpg" title="girl" alt="girl"/>
</a>
<div class="tab_con_txt_half">
<a href="javascript:;">美丽女孩人人爱</a>
</div>
</li>
<li class="tab_con_item ">
<a href="javascript:;" class="tab_con_href_all">
<!--a链接只包住所有-->
<img src="data:images/cat.jpeg" title="cat" alt="cat"/>
<div class="tab_con_txt_all">
<a href="javascript:;">可爱猫咪</a>
</div>
</a>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img">
<img src="data:images/xiaoxin.gif" title="蜡笔小新" alt="蜡笔小新"/>
</div>
<div class="tab_con_mask_txt">
<a href="javascript:;">动感超人biu biu</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img_4">
<img src="data:images/2.jpg" title="帅哥" alt="帅哥"/>
</div>
<div class="tab_con_mask_txt_4">
<a href="javascript:;">帅男</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img_4">
<img src="data:images/cat3.jpg" title="猫咪" alt="猫咪"/>
</div>
<div class="tab_con_mask_txt_4">
<a href="javascript:;">猫咪</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img_4">
<img src="data:images/cat2.jpg" title="猫咪" alt="猫咪"/>
</div>
<div class="tab_con_mask_txt_4">
<a href="javascript:;">猫咪</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img_4">
<img src="data:images/cat3.jpg" title="猫咪" alt="猫咪"/>
</div>
<div class="tab_con_mask_txt_4">
<a href="javascript:;">猫咪</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
<li class="tab_con_item ">
<div class="tab_con_href_mask_li">
<div class="tab_con_href_mask_img_4">
<img src="data:images/cat.jpeg" title="猫咪" alt="猫咪"/>
</div>
<div class="tab_con_mask_txt_4">
<a href="javascript:;">猫咪</a>
</div>
<a href="javascript:;" class="tab_con_href_mask">
<!--a链接做遮罩层-->
</a>
</div>
</li>
</ul>
</div>
<!--这里的箭头可以用图片，也可以用纯css代码，也可以用转义字符+SimSun字体-->
<a href="javscript:;" class="prev"><</a>
<a href="javscript:;" class="next">></a>
</div>
<script type="text/javascript">
window.onload = function(){
function TabControl(obj){
//选项卡菜单控制部分
this.oMenu = obj.getElementsByClassName('tab_menu')[0];
this.menuItem = this.oMenu.getElementsByTagName('a');
//前后控制按钮
this.prev = obj.getElementsByClassName('prev')[0];
this.next = obj.getElementsByClassName('next')[0];
//选项卡内容部分
this.con = obj.getElementsByClassName('tab_content')[0];
this.conItem = this.con.getElementsByClassName('tab_con_item');
//变量设置
//选项卡页数
this.count = this.conItem.length;
//当前第几页，默认为第一页，也就是0
this.current = 0;
var that = this;
//菜单控制事件
for(var i = 0; i < this.count; i++){
//设置当前索引，这种设置方法需掌握
this.menuItem[i].index = i;
this.menuItem[i].onclick = function(){
that.current = this.index;
that.menuSwitch();
}
}
//原型方法
//构造函数执行到这里的时候，会判断实例是否有menuSwitch方法，
//第一次执行构造函数时，实例是没有menuSwitch方法的，就执行if方法块的代码；
//之后再执行此构造函数时，原型上已经有这个方法了，就不会进入
//原型上的方法有很多，但是只用检测一个就行了，没必要都检测
if(typeof this.menuSwitch != 'function'){
//原型还可以用字面对象的形式，但要记得手动改变constructor指向，
TabControl.prototype = {
//字面对象的方式会改变constructor指向，我们手动改变回来
constructor : TabControl,
//菜单控制
menuSwitch : function(){
//清空所有class名
for(var j = 0;j < this.count; j++){
this.menuItem[j].className = '';
this.conItem[j].className = 'tab_con_item';
}
//给当前页添加class名
this.menuItem[this.current].className = 'menu_active';
this.conItem[this.current].className = 'tab_con_item con_active';
},
//前按钮控制
btnPrevSwitch : function(){
if(this.current > 0){
//清空前页class名
this.menuItem[this.current].className = '';
this.conItem[this.current].className = 'tab_con_item';
//页数自减1
this.current--;
//当前页添加class名
this.menuItem[this.current].className = 'menu_active';
this.conItem[this.current].className = 'tab_con_item con_active';
}else if(this.current == 0){
//清空前页class名
this.menuItem[this.current].className = '';
this.conItem[this.current].className = 'tab_con_item';
//页数跳转至最后一页
this.current = this.count-1;
//当前页添加class名
this.menuItem[this.current].className = 'menu_active';
this.conItem[this.current].className = 'tab_con_item con_active';
}
},
//后按钮控制
btnNextSwitch : function(){
if(this.current < this.count-1){
//清空前页class名
this.menuItem[this.current].className = '';
this.conItem[this.current].className = 'tab_con_item';
//页数自增1
this.current++;
//当前页添加class名
this.menuItem[this.current].className = 'menu_active';
this.conItem[this.current].className = 'tab_con_item con_active';
}else if(this.current == this.count-1){
//清空前页class名
this.menuItem[this.current].className = '';
this.conItem[this.current].className = 'tab_con_item';
//页数跳转至第一页
this.current = 0;
//当前页添加class名
this.menuItem[this.current].className = 'menu_active';
this.conItem[this.current].className = 'tab_con_item con_active';
}
}
}
//初次调用时，重新调用构造函数返回
return new TabControl(obj);
//return 构造函数时，实例就不是指向 var tab1 = new TabControl时系统创建的那个object1，
//而是指向了return new TabControl时创建的object2，这两个对象的隐式原型是不一样的，
//因为在创建object2之前已经修改了TabControl.prototype，
//所以object2的隐式原型已经指向了修改后的TabControl.prototype，因此可以找到原型上的方法
}
//前按钮控制
this.prev.onclick = function(){
that.btnPrevSwitch();
}
//后按钮控制
this.next.onclick = function(){
that.btnNextSwitch();
}
//自循环
var autoTimer = null;
//直接执行
autoTimer = setInterval(function(){
that.btnNextSwitch();
},2000);
//进入选项卡，清空计时器
obj.onmouseover = function(){
clearInterval(autoTimer);
}
//离开选项卡，计时器开始工作
obj.onmouseout = function(){
autoTimer = setInterval(function(){
that.btnNextSwitch();
},2000);
}
}
var oTab1 = document.getElementsByClassName('tab_wrapper_test1')[0];
var tab1 = new TabControl(oTab1);
var oTab2 = document.getElementsByClassName('tab_wrapper_test2')[0];
var tab2 = new TabControl(oTab2);
}
</script>
</body>
</html>
jacascript 原生选项卡插件的更多相关文章
- [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件
jquery插件一般是这么干的: $.fn.插件名称 = function(){}, 把插件的名称加在.fn上,在源码里面实际上是扩展到构造函数的原型对象上,如果你没看过jquery的源代码,或者你曾 ...
- [js插件开发教程]实现一个比较完整的开源级选项卡插件
在这篇文章中,我实现了一个基本的选项卡功能:请猛击后面的链接>> [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件. 还缺少两个常用的切换(自动切换与透明度渐变),当然 ...
- 使用jQuery.extend创建一个简单的选项卡插件
选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...
- js原生选项卡（包含无缝滚动轮播图）一
原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添 ...
- 基于jQuery简单实用的Tabs选项卡插件
jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...
- Tabs - 选项卡插件
接上篇Tabs - 选项卡插件 其中12)Yet (E)Another Tab Interface没有依赖任何javascript框架,以作补充 9)Flipping C ...
- 【特效】jquery选项卡插件，页面多个选项卡统一调用
把选项卡整合了一下,写成个插件,这样可以整个站,或整个页面有多个选项卡时,统一调用.代码的具体注意事项已经写进注释了.用于js获取元素的class名称必须有,选项卡本身的样式,另再取一个名字来设置(本 ...
- 原生JS插件（超详细）
作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高呢?当然是利用js纯原生的写法啦. ...
- 原生JavaScript插件编写指南（转载）
原生js开发指南 https://www.jianshu.com/p/e65c246beac1 在jQuery大量使用的环境下,目前网上的众多jQuery插件也能基本满足要求,但是在项目具体需求下,有 ...
随机推荐
- SqlSever数据库实践周
资源下载 进行了为期5天的数据库设计,虽然以前用过数据库,但是这一次是使用书上规范的设计流程设计的数据库,感觉有必要记录一下,希望对其他人有帮助. 我的收获:在这个博客中会体现到我的收获,对于将要进行 ...
- poj-1028 -网页导航
Description Standard web browsers contain features to move backward and forward among the pages rece ...
- dubbo + dubbo-admin 入门级demo
整个示例中,除了dubbo的服务提供者和消费者是在windows里跑着,其他的所有程序都是在centos中. 1.准备环境 windows中jdk和java ide下载. 在centos中,创建软件安 ...
- [poj3687]Labeling Balls_拓扑排序
Labeling Balls poj-3687 题目大意:给出一些球之间的大小关系,求在满足这样的关系下,编号小的尽量比编号大的球的方案. 注释:1<=N(球的个数)<=200,1< ...
- Oracle中死锁与等待
在数据库中有两种基本的锁类型:排它锁(Exclusive Locks,即X锁)和共享锁(即S锁).当数据对象被加上排它锁时,其他的事务不能不 能对它读取和修改.加了共享锁的数据对象可以被其他事务读取 ...
- 使用cocopod管理第三方
扭捏了两年多一直不愿意使用cocopod来管理第三方,一直感觉直接拖拽第三方就挺方便的,直到今天使用第三方库WebViewJavascriptBridge,拖拽一直有问题,不得已研究.使用了cocop ...
- 项目Alpha冲刺Day4
一.会议照片 二.项目进展 1.今日安排 学习熟悉前台框架且搭建前台页面框架. 2.问题困难 使用了前端的构建工具webpack,困难在于怎么使用gradle结合它连同后台框架中的配置一起打包,因为本 ...
- 单向链表在O(1)时间内删除一个节点
说删链表节点,第一时间想到就是遍历整个链表,找到删除节点的前驱,改变节点指向,删除节点,但是,这样删除单链表的某一节点,时间复杂度就是O(n),不符合要求: 时间复杂度是O(n)的做法就不说了,看看O ...
- django获取ip与数据重复性判定
获取ip if request.META.has_key('HTTP_X_FORWARDED_FOR'): ip_c = request.META['HTTP_X_FORWARDED_FOR'] el ...
- PHP、Java、Python、C、C++ 这几种编程语言都各有什么特点或优点
PHP.Java.Python.C.C++ 这几种编程语言都各有什么特点或优点 汇编: C: Java: C#: PHP: Python: Go: Haskell: Lisp: C++: &l ...