原生JS 选项卡代码实现
可实现同页面多个选项卡
效果图:
代码实现:
HTML部分
<div class="main" id="tabs">
<div class="tabDiv">
<a href="javascript:;" class="on">选项一</a>
<a href="javascript:;">选项二</a>
<a href="javascript:;">选项三</a>
</div>
<div class="con">
1111111111111111111111111
</div>
<div class="con">
2222222222222222222222222
</div>
<div class="con">
3333333333333333333333333
</div>
</div> <div class="main" id="tabs1">
<div class="tabDiv">
<a href="javascript:;" class="on">选项一</a>
<a href="javascript:;">选项二</a>
<a href="javascript:;">选项三</a>
</div>
<div class="con">
1111111111111111111111111
</div>
<div class="con">
2222222222222222222222222
</div>
<div class="con">
3333333333333333333333333
</div>
</div>
JS部分
fnTab("tabs");
fnTab("tabs1"); function fnTab(id){
var parentEle = document.getElementById(id);
var tabTools = getByClass(parentEle,"tabDiv")[0].getElementsByTagName("a");
var conArr = getByClass(parentEle,"con");
conArr[0].className += " active";
for(var i=0;i<tabTools.length;i++){
(function(i){
tabTools[i].onclick = function(){
for(var j=0;j<conArr.length;j++){
removeClass(tabTools[j],"on");
removeClass(conArr[j],"active");
}
addClass(tabTools[i],"on");
addClass(conArr[i],"active");
}
})(i); } } function getByClass(oParentEle,sClass){
if(oParentEle.getElementsByClassName){
var oEles = oParentEle.getElementsByClassName(sClass);
return oEles;
}else{
var oEles = oParentEle.getElementsByTagName("*");
var aRes = [];
for(var i=0;i<oEles.length;i++){
if(oEles[i].className == sClass){
aRes.push(oEles[i]);
}
}
return aRes;
} }
function addClass(ele,className){
if(ele && ele.nodeType == 1){
var reg = new RegExp("\\b"+className +"\\b","g");
if(!reg.test(ele.className)){
ele.className += " "+className;
}
} }
function removeClass(ele,className){
if(ele && ele.nodeType == 1){
var reg = new RegExp("\\b"+className +"\\b","g");
if(reg.test(ele.className)){
ele.className = ele.className.replace(reg,"");
}
} }
原生JS 选项卡代码实现的更多相关文章
- 原生js一行代码实现简易轮播图
这是一个简易的js无限循环轮播图,只用了一行js代码就实现了无限循环,记录一下三目运算符的伟大! <!DOCTYPE html><html lang="en"&g ...
- 原生js扫雷代码
思路要点: 1. 随机地雷放到一个二维数组中: 2. 每一个格子要统计周围有几颗雷: 3. 每一个格子是否处于打开状态,用于判断是否赢得游戏: 4. 如果点击到周围没有雷的地方,把周围的打开: 具体的 ...
- 原生JS常用代码汇总
数组相关 var codes = new Array( ); //创建数组codes.length //数组长度 动态插入数组 codes.push(value);
- 原生js选项卡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生js简易日历效果实现
这里我们将用原生js实现简易的日历,原理和之前的原生js选项卡差不多,不过也有些区别: 首先html代码: <div class="container"> <di ...
- 抛弃JQ,回归原生js……
之前我写过一篇文章叫做<jq不会被淘汰>--而事实上它真的不会被淘汰,因为即使在mvvm框架盛行的今天,原生js的api越来越友好的今天,jq依然在用户量上是霸主-- 但是今天我们要讨论的 ...
- 原生js瀑布流
HTML部分代码............................... CSS部分代码........................... 原生js部分代码................. ...
- jQuery和原生JS的对比
原生JS的缺点: 不能添加多个入口函数(window.onload),如果添加了多个,后面的会把前面的覆盖掉 原生js的api名字太长,难以书写,不易记住 原生js有的代码冗余 原生js中的属性或者方 ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
随机推荐
- 数据结构(左偏树,可并堆):BNUOJ 3943 Safe Travel
Safe Travel Time Limit: 3000ms Memory Limit: 65536KB 64-bit integer IO format: %lld Java class ...
- Nodejs in Visual Studio Code 09.企业网与CNPM
1.开始 CNPM : https://npm.taobao.org/ 2.企业网HTTP代理上网 平时办公在一个大企业网(10.*.*.*)中,使用HTTP代理上网,发现npm命令无法执行. 解决方 ...
- SRM 405(1-250pt, 1-500pt)
DIV1 250pt 题意:以linux系统中文件系统的路径表示方法为背景,告诉你某文件的绝对路径和当前位置,求相对路径.具体看样例. 解法:模拟题,不多说.每次碰到STL的题自己的代码都会显得很sb ...
- 谈JSON在Ajax中的使用
JSON是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.AJAX是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术.之前也曾介绍过在PHP语言中使用JSON的文章, ...
- [转]windows10 64位环境下安装mysql5.7.17
今天以zip模式在windows10 64位环境下安装mysql5.7,到最后一步提示mysql服务无法启动. 安装步骤如下: 1.配置环境变量 我的电脑->属性->高级->环境变量 ...
- DBCP,C3P0,Tomcat_JDBC 性能及稳定性测试
1.测试环境: 硬件环境: 数据库服务器:2U*8核 8G内存 测试服务器: 2U*8核 6G内存 软件环境: jdk: 1.6.29 mysql: 5.0.77 mysql_driver: my ...
- Android Intent传递对象小结
效果: 想看实例的,感兴趣的能够看之前的一篇文章 Android ViewPager Fragment实现选项卡 部分关键代码: public class SerializeActivity exte ...
- javaScript的使用
<script>XXX</ccript>HTML文件插入js的主要方法.这个标签主要有以下的几个属性: 1,charset:可选.表示通过src属性指定的字符集. 2,defe ...
- paip.输入法编程----删除双字词简拼
paip.输入法编程----删除双字词简拼 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.net/at ...
- Qt 学习之路:视图选择 (QItemSelectionModel)
选择是视图中常用的一个操作.在列表.树或者表格中,通过鼠标点击可以选中某一项,被选中项会变成高亮或者反色.在 Qt 中,选择也是使用了一种模型.在 model/view 架构中,这种选择模型提供了一种 ...