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

Posted 2022-08-12 suihang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三行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>

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

以上是关于三行Jquery代码实现简单的选项卡的主要内容，如果未能解决你的问题，请参考以下文章

jquery简单实现tab选项卡效果--转

jquery实现的tab选项卡