原生js实现tab选项卡
1.html部分
<body>
<div id="tab">
<div class="tab_menu">
<ul>
<li class="selected"><a href="#">时事</a></li>
<li><a href="#">体育</a></li>
<li><a href="#">娱乐</a></li>
</ul>
</div>
<div class="tab_box">
<div>时事</div>
<div class="hide">体育</div>
<div class="hide">娱乐</div>
</div>
</div>
</body>
2.css部分:样式部分实现方法多种多样,这是我写的简单的demo,我最不擅长的css ><...
.tab_menu .selected{background-color:#aaa;}
.tab_menu ul{height:30px;}
.tab_menu ul li{float:left;list-style:none;width:50px;height:30px;color:#000;border:solid 1px gray;border-bottom:none; text-align:center;line-height:30px;margin-right:3px;}
.tab_menu ul li a{text-decoration:none;}
.tab_box{width:170px;height:150px;border:solid 1px gray;}
.tab_box .hide{display:none;}
3.重要的js部分:
window.onload=function(){
var oTab=document.getElementById('tab');
var aLi=oTab.getElementsByTagName('li');
var oTabBox=oTab.getElementsByTagName('div')[1];
var aBox=oTabBox.getElementsByTagName('div');
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='';//取消菜单样式
aBox[j].className='hide';//隐藏所有的tabDiv
}
aLi[this.index].className='selected';
aBox[this.index].className='';
}
}
}
这个简单粗暴,完全没有考虑如果tabMenu、tabBox有多个样式的情况,不适应项目只是一个思路。很多地方需要完善。下面考虑标签多个class的情况,不过一般都有多个class,现在就要用到去除某个class,添加class的技能了。
3.1原生js中class的添加及删除。
window.onload=function(){
var oTab=document.getElementById('tab');
var aLi=oTab.getElementsByTagName('li');
var oTabBox=oTab.getElementsByTagName('div')[1];
var aBox=oTabBox.getElementsByTagName('div');
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onclick=function(){
for(var j=0;j<aLi.length;j++){
var aClass=aLi[j].className.split(' ');//元素.className是一个字符串,切割成数组
var aClass1=aBox[j].className.split(' ');//同样的方法得到box的
for(var z=0;z<aClass.length;z++){
if(aClass[z]=='selected'){
aClass.splice(z,1);//利用数组的splice方法删除找到的这个类
}
}
for(var k=0;k<aClass1.length;k++){
if(aClass1[k]=='hide'){
aClass1.splice(k,1);
}
}
aLi[j].className=aClass.join(' ');//所有的menu都去除selected样式
aBox[j].className+=' hide';//所有box都隐藏
aBox[this.index].className=aClass1.join(' ');//当前box显示
aLi[this.index].className+=' selected';//当前menu添加select样式
}
}
}
}
亲测有效,不过都写在一个方法里有点乱,而且类多的时候效率也是问题,不过类应该不很很多吧==以后再优化吧,这个功能用jquery很简单。
ps:把用jquery实现这个功能写一下:
<script>
$(function(){
var aLi=$(".tab_menu ul li");
aLi.click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
var index=$(this).index();
$('.tab_box div').eq(index).show().siblings().hide();
});
});
</script>
简单多了。
原生js实现tab选项卡的更多相关文章
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- 原生js面向对象编程-选项卡(自动轮播)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 原生js面向对象编程-选项卡(点击)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- js 实现tab选项卡
最近一直在研究js 如果不及时复习的话前边学到的东西很快就会忘掉,所以把前段时间的一个简单的tab选项卡的思路写出来也算复习了一下吧, 第一步:先把布局写出来: <div id="d ...
- 原生js实现tab切换
//通过原生js实现table切换<html><head><meta http-equiv="Content-Type" content=" ...
- 原生JS实现tab切换--web前端开发
tab切换非常常见,应用非常广泛,比较实用,一般来说是一个网站必不可少的一个效果.例如:https://123.sogou.com/中的一个tab部分: 1.案例源代码 <!DOCTYPE ht ...
- 【原生JS】切换选项卡
效果图: HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
- JS实现Tab选项卡
http://www.jb51.net/article/24694.htm http://www.sunsean.com/idTabs/#t1 http://www.cnblogs.com/sskse ...
- 标签页(tab)切换的原生js,jquery和bootstrap实现
概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...
随机推荐
- NPM私有服务器架设 FOR CentOS
确保计算机能够连接互连网. 一.安装 Couchdb1.6 1.(CentOS 6.7)如果版本低于6.7请使用下面命令更新系统库. yum update 2.使用下面命令安装依赖库 yum inst ...
- CyanogenMod wiki reading tips | Android tips
To Enable the Developer and Performance settings on CyanogenMod 10.1 In the Settings app, choose the ...
- 用户无法进入SDSF,报NO GROUP ASSIGNMENT错误
注:命令行小写部分表出需要根据自己的情况改变!! a)激活SDSF资源类 SETROPTS CLASSACT(SDSF) b)查看SDSF资源类的PROFILE RLIST SDSF * c)如果不存 ...
- 【转】web集群时session同步的3种方法
转载请注明作者:海底苍鹰地址:http://blog.51yip.com/server/922.html 在做了web集群后,你肯定会首先考虑session同步问题,因为通过负载均衡后,同一个IP访问 ...
- [转]SpringMVC Controller&View数据传递
Spring MVC3在controller和视图之间传递参数的方法: 一, 从controller往视图传递值, controller---->视图 1)简单类型,如int, Stri ...
- Logcat 不显示日志的另一个原因. 跟cocos2dx关系不大.
在Android真机调试时,如果在eclipse中看不到LogCat信息,提示是: $ adb logcat info: log device is empty! 原因是系统默认关闭了log,需要将其 ...
- Linux命令:ps / top
简介:ps - report a snapshot of the current processes. 用途:获取当前时刻程序运行状态 概要:ps [options] 类型:ps is hashed ...
- [Python] Magic editor in Pycharm
From: http://blog.csdn.net/u013088062/article/details/50249751 From:http://blog.csdn.net/u013088062/ ...
- [Node.js] 使用File API 异步上传文件
原文地址:http://www.moye.me/2014/11/05/html5-filereader/ 最近在做一个网盘的项目,不出意外的涉及到大文件的上传,那么问题来了:如何实时的显示文件上传的进 ...
- HT全矢量化的图形组件设计
HT一直被客户称道的就是其全矢量化的设计特色,矢量相比传统图片好处太多了: 矢量可无级缩放,界面不失真不模糊 描述矢量的文本内容远比图片小得多 目前各种window.devicePixelRatio不 ...