简单易用的选项卡代码

最新推荐文章于 2024-01-24 12:19:34 发布

牛逼哄哄的树叶

最新推荐文章于 2024-01-24 12:19:34 发布

阅读量530

点赞数 1

文章标签： html css javascript jquery

本文链接：https://blog.csdn.net/qq_35935086/article/details/52277553

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #btn1,#btn2,#btn3{
            width: 160px;
            height: 40px;
            border: none;
            border-radius: 15px;
        }
        #btn1{
            background: green;
        }
        #btn1:visited{
            border: none;
        }
        #btn2,#btn3{
            background: yellow;
        }
        #tab_1,#tab_2,#tab_3{
            margin-top: 10px;
            width: 455px;
            height:200px;
            border-radius: 15px;
            padding: 20px;
        }
        #tab_1{
            background:skyblue;
        }
        #tab_2{
            background: palegreen;
        }
        #tab_3{
            background: pink;
        }
        #tab_1{
            display: block;
        }
        #tab_2,#tab_3{
            display: none;
        }
    </style>
</head>
<body>
<input type="button" id="btn1" value="选项卡1"/>
<input type="button" id="btn2" value="选项卡2"/>
<input type="button" id="btn3" value="选项卡3"/>
<div>
<div id="tab_1">
    这是第一个选项卡
</div>
<div id="tab_2">
    这是第二个选项卡
</div>
<div id="tab_3">
    这是第三个选项卡
</div>
</div>
</body>
<script src="js/jquery-1.12.1.min.js"></script>
<script>

        $("#btn1").click(function(){
                    $("#btn1").css("background","green");
                    $("#btn2,#btn3").css("background","yellow");
                    document.getElementById("tab_1").style.display="block";
                    document.getElementById("tab_2").style.display="none";
                    document.getElementById("tab_3").style.display="none";
                }
        );
        $("#btn2").click(function(){
                    $("#btn2").css("background","green");
                    $("#btn1,#btn3").css("background","yellow");
                    document.getElementById("tab_1").style.display="none";
                    document.getElementById("tab_2").style.display="block";
                    document.getElementById("tab_3").style.display="none";
                }
        );
        $("#btn3").click(function(){
                    $("#btn3").css("background","green");
                    $("#btn1,#btn2").css("background","yellow");
                    document.getElementById("tab_1").style.display="none";
                    document.getElementById("tab_2").style.display="none";
                    document.getElementById("tab_3").style.display="block";
                }
        );
</script>
</html>

牛逼哄哄的树叶

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单易用的选项卡代码

html>html>head lang="en"> meta charset="UTF-8"> title>title> style> #btn1,#btn2,#btn3{ width: 160px; height: 40px; border: none; b
复制链接

扫一扫