javascript - 求救，怎么通过radio切换面板-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

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

伊谢尔伦 2017-04-11 12:04:40

[JavaScript讨论组]

260

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

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(5)

伊谢尔伦2017-04-11 12:06:40 5楼

<!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>


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

</p>


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

</p>


<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,这个是面向对象的写法，希望对你有帮助

赞 +0

添加回复

ringa_lee2017-04-11 12:06:40 4楼

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

赞 +0

添加回复

天蓬老师2017-04-11 12:06:40 3楼

监听radio，填充html

赞 +0

添加回复

黄舟2017-04-11 12:06:40 2楼

onchang="hehe(this)"

function hehe(obj){ 
    xxxx
    xxxx
}

赞 +0

添加回复

PHP中文网2017-04-11 12:06:40 1楼

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

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>