美文网首页
点击radio切换页面内容(多个radio作tab栏)

点击radio切换页面内容(多个radio作tab栏)

作者: 雅雅的前端工作学习 | 来源:发表于2018-08-23 16:11 被阅读0次

之前做过多个按钮点击切换tab栏,产品提交了要radio版本的(多个radio互斥),我以为会差不多,结果以前的代码拿过去一点用没有。
关键是radio不止有点击事件,还有checked属性,在考虑到点击事件的同时,也要考虑到checked选项的状态,不然函数是无效的!所以在点击事件的函数里,还要加上对不同情况的checked作出相应的操作:

function tabshift(a,b) {
        liobjs=document.getElementsByName(a);
        dvobjs=document.getElementsByName(b)
        for(var i=0;i<liobjs.length;i++){
            liobjs[i].setAttribute("index",i)
            liobjs[i].onclick=function () {
                var num=this.getAttribute("index");
                if(this.checked){//很重要
                    for(var p=0;p<dvobjs.length;p++){
                        dvobjs[p].classList.remove("show")
                    }
                    dvobjs[num].classList.add("show")
                }
            }
        }
    }
    tabshift("radio","dvname");

相关文章

网友评论

      本文标题:点击radio切换页面内容(多个radio作tab栏)

      本文链接:https://www.haomeiwen.com/subject/ppkmiftx.html