原生JS 选项卡代码实现

可实现同页面多个选项卡

效果图:

代码实现:

HTML部分

 1 <div class="main" id="tabs">
 2             <div class="tabDiv">
 3                 <a href="javascript:;" class="on">选项一</a>
 4                 <a href="javascript:;">选项二</a>
 5                 <a href="javascript:;">选项三</a>
 6             </div>
 7             <div class="con">
 8                 1111111111111111111111111
 9             </div>
10             <div class="con">
11                 2222222222222222222222222
12             </div>
13             <div class="con">
14                 3333333333333333333333333
15             </div>
16         </div>
17
18         <div class="main" id="tabs1">
19             <div class="tabDiv">
20                 <a href="javascript:;" class="on">选项一</a>
21                 <a href="javascript:;">选项二</a>
22                 <a href="javascript:;">选项三</a>
23             </div>
24             <div class="con">
25                 1111111111111111111111111
26             </div>
27             <div class="con">
28                 2222222222222222222222222
29             </div>
30             <div class="con">
31                 3333333333333333333333333
32             </div>
33         </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,"");
                }
                }

            }
时间: 2024-10-02 19:10:35

原生JS 选项卡代码实现的相关文章

原生js选项卡(代码临时存储)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> <title>js函数</title>&l

原生js选项卡

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> /* CSS样式制作 */ *{margin:0;padding:0;font-size:12px;}#tabs{width:220px;padd

原生JS常用代码汇总

数组相关 var codes = new Array( ); //创建数组codes.length //数组长度 动态插入数组 codes.push(value);

原生js简易日历效果实现

这里我们将用原生js实现简易的日历,原理和之前的原生js选项卡差不多,不过也有些区别: 首先html代码: <div class="container"> <div class="container_cont"> <ul id="cont_ul"> <li class="active"> <span>1</span> <p>jan</p&

原生js实现tab选项卡里内嵌图片滚动特效代码

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>原生js实现tab选项卡里内嵌图片滚动特效代码</title><meta name="keywords" content="原生js实现tab选项卡里内嵌图片滚动特效代码" /><meta name=&

原生js、jQuery实现选项卡功能

在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图:              好了,下边开始写代码了: HTML代码: <ul> <li class="click">red</li> <li>blue</li> <li>yellow</li> </ul> <div class

原生JS画的tab选项卡

记录一下原生js写的tab选项卡 鼠标滑入可以切换图片 离开之后自动切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-

原生js实现的创建和删除元素实例代码

原生js实现的创建和删除元素实例代码:在实际应用中,往往需要动态的创建和删除指定的元素,下面就通过代码实例介绍一下如何实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&g

原生js阻止事件冒泡代码实例

原生js阻止事件冒泡代码实例:关于什么是事件冒泡这里就不多介绍了,可以参阅javascript事件冒泡简单介绍一章节,任何现象都是双刃剑,有时候利用事件冒泡能够带来便利性,但是有时候也会带来不便,下面就通过带来实例介绍一下如何阻止事件冒泡现象.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" conte