用js写选项卡效果,实现原理;

最新推荐文章于 2021-11-13 09:38:14 发布

webmxj

最新推荐文章于 2021-11-13 09:38:14 发布

阅读量641

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/div_ma/article/details/72639339

版权

js 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            .box{

                margin:50px;
            }
            .box div{
                display:none;
                width: 200px;
                height: 200px;
                border:1px solid black;
            }
            .onclick{
                background:red;
            }
            input{
                border:1px solid #666;
                padding:2px;
            }
        </style>
    </head>
    <body>
        <div class='box'>
            <input type="button" value='按钮1' class='onclick'/>
            <input type="button"  value='按钮2' />
            <input type="button"  value='按钮3' />
            <div style="display:block">1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </body>
    <script>
        var ipt=document.getElementsByTagName('input');
        //获取所有的按钮标签
        var oDiv=document.getElementsByClassName('box')[0];
        //获取box标签
        var aDiv=oDiv.getElementsByTagName('div');
        //获取box下面的所有div标签
        for(var i=0;i<ipt.length;i++){
            //使用for循环 遍历所有的input按钮
            ipt[i].index=i;
            //定义索引为i;
            ipt[i].onclick=function(){
                //点击事件
                for(var j=0;j<ipt.length;j++){
                    //清除所有的样式
                    aDiv[j].style.display='none';

                    ipt[j].className='';

                }
                //设置adiv的样式和input的背景样式
                aDiv[this.index].style.display='block';

                ipt[this.index].className='onclick';
            }
        }
    </script>
</html>

补充JQ的做法:

$(function(){

        $('.box').find('input').click(function(){

        $('.box').find('input').attr('class','');

        $(this).attr('class','onclick');

        $('.box').find('div').css('display','none');

        $('.box').find('div').eq($(this).index()).css('display','block');

        });
    });

webmxj

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用js写选项卡效果,实现原理;

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> *{ margin:0; padding:0; }
复制链接

扫一扫