js 点击在同一页切换不同的内容

来源：互联网发布：安卓高仿充值q币软件编辑：程序博客网时间：2024/04/23 17:34
<!doctype html>
<!--只做一个模板，样式就不做了-->
<html lang='zh-cn'>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        *{margin: 0;padding: 0;}
        #container{
            height: 180px;
            width: 240px;
            margin: 200px auto;
        }
        #btn{
            float: left;
            width: 60px;
            height: 180px;
        }
        #tab{
            float: right;
            width: 178px;
            height: 178px;
            margin-left: -180px;
            border: 1px solid black;
            position: relative;
        }
        .tab_btn{
            display: block;
            width: 58px;
            height: 58px;
            background: green;
            line-height: 60px;
            text-align: center;
            border: 1px solid red;
            text-decoration: none;
            color: black;
        }
 
        .tab_btn:hover{
            background: blue;
            color: white;
        }
 
        .tab_div{
            position: absolute;
            left: 0px;
            top: 0px;
            display: none;
        }
 
        .curr_btn{
            background: blue !important;
            color: white;
        }
        .curr_div{
            display: block !important;
        }
    </style>
    <script>
      function getClass(className) { //className指class的值
       
                var tagname = document.getElementsByTagName('*');  //获取指定元素
                var tagnameAll = [];     //这个数组用于存储所有符合条件的元素
                for (var i = 0; i < tagname.length; i++) {     //遍历获得的元素
                    if (tagname[i].className.indexOf(className)>=0){     //如果获得的元素中的class的值等于指定的类名，就赋值给tagnameAll
                        tagnameAll[tagnameAll.length] = tagname[i];
                    }
                }
                return tagnameAll;
             
        }
 
 
 
        window.onload=function(){//载入事件
            var btn=getClass('tab_btn');//获取按钮数组
            var div=getClass('tab_div');//获取div数组
            for(i=0;i<btn.length;i++){
                btn[i].onclick=function(){//按钮点击事件
                    var index=(this.getAttribute('index')-0);//获取是第几个按钮按下
                    if(btn[index].className.indexOf('curr_btn')>=0) return;//如果按下的按钮为当前选中的按钮则无反应
                    for(i=0;i<btn.length;i++){
                        if(index==i){
                            btn[i].className='tab_btn curr_btn';
                            div[i].className='tab_div curr_div';
                        }else{
                            btn[i].className='tab_btn';
                            div[i].className='tab_div';
                        }
                    }
                }
            }
        };
    </script>
</head>
 
 
<body>
 
    <div id="container">
        <div id='btn'>
            <a href='javascript:void(0)' index='0' class='tab_btn curr_btn'>1</a>
            <a href='javascript:void(0)' index='1' class='tab_btn'>2</a>
            <a href='javascript:void(0)' index='2' class='tab_btn'>3</a>
        </div>
        <div id='tab'>
            <div class='tab_div curr_div'>
                div1
            </div>
            <div class='tab_div'>
                div2
            </div>
            <div class='tab_div'>
                div3
            </div>
        </div>
    </div>
 
</body>
 
</html>
阅读全文
0 0