求救，怎么通过radio切换面板

不用JQ，求原生JS方法
有没有更好的写法

为什么不找个做好的插件呢，一般用户量比较多的插件往往都是经过各方面考验的，应该比你自己去实现要好一些吧。

监听radio，填充html

先按顺序遍历按钮和内容层,绑定事件就行了
btn1,btn2,btn3 遍历创建属性data-id=con1 data-id=con2 data-id=con3
点击的时候根据自身data-id显示con1还是con2 con3就行了

另外,把事情想的灵活点,配合css就更快.
比如给con1 con2 con3加个外层,你点击时候只要对外层的class进行加减,在css里根据classname 显示对应内容这样工作量就很少了

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>OOP</title>
    <style type="text/css">
        *{margin:0; padding: 0;list-style: none}
        .tab-box{
            width:400px;
            height: 400px;
            border: 1px solid #ccc;
            clear:both;
        }
        .tab{
            width: 400px;
            height: 30px;
            line-height: 30px;
        }
        .tab ul li{
            float: left;
            width:100px;
            text-align: center;
            background: grey;
            -moz-box-sizing:border-box;
        }
        .tab ul li.current{
            background: red;
        }
        .tab-content{
            width:500px;    
        }
        .tab-content ul li{
            display:none;
            float:left;
        }
    </style>
</head>
<body>


<div class="tab-box">
    <div class="tab" id='js-tabul'>
        <ul>
            <li>数学</li>
            <li>语文</li>
            <li>物理</li>
            <li>英文</li>
        </ul>
    </div>
    <div class="tab-content" id="js-tab-content">
        <ul>
            <li>数学</li>
            <li>语文</li>
            <li>物理</li>
            <li>英文</li>
        </ul>
    </div>

</div>


<div class="tab-box">
    <div class="tab" id='js1-tabul'>
        <ul>
            <li>数学</li>
            <li>语文</li>
            <li>物理</li>
            <li>英文</li>
        </ul>
    </div>
    <div class="tab-content" id="js1-tab-content">
        <ul>
            <li>数学</li>
            <li>语文</li>
            <li>物理</li>
            <li>英文</li>
        </ul>
    </div>

</div>


<script type="text/javascript"> 


    function switchTab(tabname,tabcont){

        this.tabname = tabname;
        this.tabcont = tabcont;
        this.clickevent = function(){
            var i = 0;
            for(;i<this.tabname.length;i++){
                this.tabname[i].index = i;
                this.tabname[0].className = "current";
                this.tabcont[0].style.display = "block";
                var self =this;
                this.tabname[i].onclick=function(){
                    for(i=0;i<self.tabname.length;i++){ 
                        self.tabname[i].className = '';
                        self.tabcont[i].style.display = "none";
                    }
                    
                    this.className = "current";
                    self.tabcont[this.index].style.display = "block";

                };
         
        }
        };
    }

    var tab1 = new switchTab(document.getElementById('js-tabul').getElementsByTagName('li'),document.getElementById('js-tab-content').getElementsByTagName('li'))

    tab1.clickevent();

    var tab2 = new switchTab(document.getElementById('js1-tabul').getElementsByTagName('li'),document.getElementById('js1-tab-content').getElementsByTagName('li'))

    tab2.clickevent();


</script>
</html>

之前自己写的原生tab选项卡。你把对应的li改成raido,或者直接模仿用li直接模仿radio,这个是面向对象的写法，希望对你有帮助

onchang="hehe(this)"

function hehe(obj){ 
    xxxx
    xxxx
}

【热门文章】