原生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 ...
随机推荐
- java之对象转型
对象转型(casting) 1.一个基类的引用类型变量可以“指向”其子类的对象. 2.一个基类的引用不可以访问其子类对象新增加的成员(属性和方法). 3.可以使用 引用变量 instanceof 类名 ...
- 250W电源带i7+GTX1080?
电源的科学: Q1:电源的额定功率是什么?峰值功率又是什么?A1:电源的额定功率就是电源正常工作时的功率,它的值为用电器的额定电压乘以额定电流.而峰值功率指的是电源短时间内能达到的最大功率, 一般情况 ...
- WindowsServer2012桌面图标设置
1.win+R调出运行窗口 2.输入:rundll32.exe shell32.dll,Control_RunDLL desk.cpl,,0 即可
- 重构第2天:方法搬移(Move Method)
现在就重构来说是非常普通的,虽然我们经常会漏掉或忽略一些需要重构的地方.方法搬移,正如所定义的那样,把方法搬移到更适合他的位置.让我们看看下面这一段重构前的代码: 理解:方法搬移,正如所定义的那样,把 ...
- mac x Yosemide(10.10) 下安装 jdk 1.7 (jdk 1.8)的方法
当我们想在mac x yosemide 系统中更新jdk到1.7(1.8)的时候,会弹出下面的错误提示 解决这个问题的办法如下: 1.下载 好jdk 1.7(1.8) 地址:http://www.or ...
- ArcGIS提取影像边界
基于ArcGIS有多重办法可以提取影像边界,比如常用的有以下几种方式: a.System Toolboxes --> 3D Analyst Tools --> Conversion --& ...
- [持续更新]UnsatisfiedLinkError常见问题及解决方案
想必很多开发者和我们一样,遇到过许多UnsatisfiedLinkError的困难,着实令人头疼,现在总结一下,希望能帮助更多的人. 常见错误 lib库不同目录下的SO文件参差不齐. lib库目录下的 ...
- 如何查看distirbution agent的执行进度
在transactional replication troubleshooting的过程中,经常会遇到下面的场景: 客户在发布端执行了一个几百万行的更新,结果导致性能下降. 客户很想知道目前dist ...
- Unity 脚本系统
什么是脚本?脚本是一个 MonoBehavior, 继承关系是 MonoBehavior -> Behavior -> Component -> Object GameObject ...
- [IR] Evaluation
无序检索结果的评价方法: Precision P = tp/(tp + fp) Recall R = tp/(tp + fn) Accuracy = (tp + tn) ...