jQuery实现简单选项卡

最新推荐文章于 2020-06-02 13:36:24 发布

yzxzsp11

最新推荐文章于 2020-06-02 13:36:24 发布

阅读量540

点赞数

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

本文链接：https://blog.csdn.net/yzxzsp11/article/details/50636373

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ选项卡</title>
    <style>
        #div1{
            display:none;
            height: 100px;
            width: 50px;
            background-color: #d6e9c6;
        }
        #div2{
            display:none;
            height: 100px;
            width: 50px;
            background-color: #d6e9c6;
        }
        #div3{
            display:none;
            height: 100px;
            width: 50px;
            background-color: #d6e9c6;
        }
    </style>
</head>
<body>
<div id="div">
    <input type="button" value="选项卡1"/>
    <input type="button" value="选项卡2"/>
    <input type="button" value="选项卡3"/>

    <div id="div1">
        <p>div1</p>
    </div>
    <div id="div2">
        <p>div2</p>
    </div>
    <div id="div3">
        <p>div3</p>
    </div>
</div>
</body>
<script src="jquery-2.2.0.min.js"></script>
<script>
    //原生js版
//    window.onload=function(){
//        choose();
//    };
//    function choose(){
//        var oDiv=document.getElementById('div');
//        var oBtn=oDiv.getElementsByTagName('input');
//        var oDiv1=document.getElementsByTagName('div');
//        for(var i=0;i<oBtn.length;i++) {
//            oBtn[i].index=i;
//            oBtn[i].onclick = function () {
//                for(var j=1;j<oDiv1.length;j++){
//                    oDiv1[j].style.display='none';
//                }
//                oDiv1[this.index+1].style.display = 'block';
//            };
//        }
//    }
    //JQuery版
    $(function(){
        $('#div').find('input').click(function(){
            $('#div').find('div').css('display','none');
            $('#div').find('div').eq($(this).index()).css('display','block');
        })
    })
</script>
</html>