jquery编写选项卡

最新推荐文章于 2018-07-26 22:50:53 发布

难瘦不难过

最新推荐文章于 2018-07-26 22:50:53 发布

阅读量496

点赞数

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

本文链接：https://blog.csdn.net/osweet12345678/article/details/51915828

版权

jq 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript " src="jquery-2.2.3.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">11111</div>
    <div>222222</div>
    <div>333333</div>
</div>

</body>
</html>