简单的选项卡切换

最新推荐文章于 2022-12-22 11:21:18 发布

幻像

最新推荐文章于 2022-12-22 11:21:18 发布

阅读量103

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/csdnxy/article/details/113780741

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

js写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            display: none;
        }
        .active{
            background-color: red;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            var aInput=oDiv.getElementsByTagName('input');
            var aCon=oDiv.getElementsByTagName('div');

            for(var i=0;i<aInput.length;i++){
                aInput[i].index=i;
                aInput[i].onclick=function(){
                    for(var i=0;i<aInput.length;i++){
                        aInput[i].className=''
                        aCon[i].style.display='none'
                    }
                    this.className='active';
                    aCon[this.index].style.display="block";
                }
            }
            
        }
    </script>
</head>
<body>
    <div id="div1">
        <input class="active" type="button" value="1" />
        <input type="button" value="2" />
        <input type="button" value="3" />
        <div style="display: block;">1111111111</div>
        <div>2222222222</div>
        <div>3333333333</div>
    </div>
</body>
</html>

jquery写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        #div1 div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            display: none;
        }
        .active{
            background-color: red;
        }
    </style>
    <script>
     
        $(function(){
            $('#div1').find('input').click(function(){
                $('#div1').find('input').attr('class','');
                $('#div1').find('div').css('display','none');
                $(this).attr('class','active');
                $('#div1').find('div').eq($(this).index()).css('display','block');
            })
        })
    </script>
</head>
<body>
    <div id="div1">
        <input class="active" type="button" value="1" />
        <input type="button" value="2" />
        <input type="button" value="3" />
        <div style="display: block;">1111111111</div>
        <div>2222222222</div>
        <div>3333333333</div>
    </div>
</body>
</html>