Heading for the future

三行Jquery代码实现简单的选项卡

今晚，我们来用实现一个简单的选项卡切换代码，主要代码只有两行。

效果：

 

思路：通过切换JQuery控制div的显隐和样式的改变

　　　其中那个一个div显示，其余全隐藏

实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        <style>
        *{margin:0;padding:0;}
        #content{
            width: 200px;
            height: 200px;
            border:1px solid #ccc;
            overflow: hidden;
            margin-top: -1px;
        }
        button{
            border:1px solid #ccc;
            outline:none;
        }
        .active{
            background: white;
            border-bottom: 1px solid white;
        }
        #content>div{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <button class="active">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <div id="content">
        <div>标签页11111</div>
        <div>标签页2222</div>
        <div>标签页3333</div>
    </div>
</body>
</html>
<script src="jquery-1.11.3.js"></script>
<script>
$("button").click(function(){
    // 控制样式的改变 当前按钮添加样式，他的同级兄弟全部去除样式
    $(this).addClass('active').siblings().removeClass('active');
    // 控制div的显隐 当前按钮对应的div显示，他的同级兄弟全部隐藏
    $("#content>div").eq($(this).index()).css("display","block").siblings().css("display","none");
})
</script>

简单吧，其实只要思路出来了没什么难的，今天被问这个怎么实现，顺便就写一下。希望能帮到大家

posted @ 2019-08-21 23:10  一只菜鸟攻城狮啊  阅读(538)  评论(0)  编辑  收藏  举报