多个table切换 getElementsByClassName

最新推荐文章于 2022-06-08 12:48:29 发布

diao1981

最新推荐文章于 2022-06-08 12:48:29 发布

阅读量134

点赞数

原文链接：http://www.cnblogs.com/Xuman0927/p/6122327.html

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title></title>
<style>
* {
    margin:0;
    padding:0;
    list-style:none;
    font-family: "微软雅黑", "张海山锐线体简"
}
.sub_card { width:100%}
.sub_card ul{ width:100%;float: left;}
.sub_card li {
    background:#ccc; float:left; width:110px; 
}
.sub_card li.active {
    background:red;
}
.none{
    display:none;
}
.current {
    display:block;
}
</style>
<script>
window.onload=function(){
    sub_card('sub_card');
};

//解决ie8下面不兼容getElementsByClassName的方法
if (!document.getElementsByClassName) {
    document.getElementsByClassName = function (className, element) {
        var children = (element || document).getElementsByTagName('*');
        var elements = new Array();
        for (var i = 0; i < children.length; i++) {
            var child = children[i];
            var classNames = child.className.split(' ');
            for (var j = 0; j < classNames.length; j++) {
                if (classNames[j] == className) {
                    elements.push(child);
                    break;
                }
            }
        }
        return elements;
    };
}



function sub_card(sClass){
    var asub_card=document.getElementsByClassName(sClass);//抓一堆卡
    //console.log(asub_card);
    for(var i=0;i<asub_card.length;i++){
        //asub_card[i]        //每一个选项卡
        initsub_card(asub_card[i]);//给每一个选项卡加功能
    }
}


function initsub_card(osub_card){    //给单个选项卡加功能
    var aIpt=osub_card.getElementsByTagName('li');
    var aDiv=osub_card.getElementsByTagName('div');
    for(var i=0;i<aIpt.length;i++){
        aIpt[i].index=i;
        aIpt[i].onclick=function(){
            for(var i=0;i<aIpt.length;i++){
                aIpt[i].className='';
                aDiv[i].className='none';    
            }
            this.className='active';
            aDiv[this.index].className='current';
        };    
    }
};
</script>
</head>

<body>
<div class="sub_card">
  <ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
  </ul>
  <div class="current">aaa</div>
  <div class="none">bbbb</div>
  <div class="none">ccc</div>
</div>

<div class="sub_card">
  <ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
  </ul>
  <div class="current">aaa</div>
  <div class="none">bbbb</div>
  <div class="none">ccc</div>
</div>


</body>
</html>

转载于:https://www.cnblogs.com/Xuman0927/p/6122327.html

diao1981

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多个table切换 getElementsByClassName

<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="" /><meta name="copyright" content="" /><title></title>...
复制链接

扫一扫