用Jquery实现扩展选项卡

最新推荐文章于 2021-06-03 12:23:49 发布

奋斗的程序猿，老杨

最新推荐文章于 2021-06-03 12:23:49 发布

阅读量89

点赞数 1

分类专栏： jquery 文章标签： jquery应用

本文链接：https://blog.csdn.net/qq_27452983/article/details/89472356

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

下面的就是例子了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script src="jquery-3.3.1.min.js"></script>
        <style>
            #div1 div{
                width:200px;
                height:200px;
                border:1px solid red;
                display:none;
            }
            .active{
                background:red;
            }
        </style>
	</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">111111</div>
            <div>222222</div>
            <div>333333</div>
        </div>
        <script>
            $(function(){
                $('#div1').find('input').click(function(){
                    $('#div1').find('input').attr('class','');//这步是清空操作,将元素的class属性给清空.
                    $('#div1').find('div').css('display','none');
                    $(this).attr('class','active'); //其中的this指代的就是选中的元素
                    $('#div1').find('div').eq($(this).index()).css('display','block');//其中的eq($(this).index())指代的就是选中的元素的对应下标,和div里面的对应的下标是一样的.
                });
            });
        </script>
	</body>
</html>