web前端选项卡demo

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

zhaihaohao1

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

阅读量786

点赞数

分类专栏： web前端demo

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/47787447

版权

web前端demo 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<!--双飞翼布局代码实战-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="css03.css" type="text/css" rel="stylesheet">


</head>
<body>
<div class="zhongjian">
    <div id="zuobian1">tab1</div>
    <div id="zhongjian1">tab2</div>
    <div id="youbian1">tab3</div>
</div>
<div id="jiewei">选项卡1</div>
<!--选项1-->
<script>
    var x = document.getElementById("zuobian1");
    x.addEventListener("click", method01);
    function method01() {
        //改变元素属
        var myvar1=document.getElementById("zuobian1");
        myvar1.style.backgroundColor="GreenYellow";
//        不变
        var myvar2=document.getElementById("zhongjian1");
        myvar2.style.backgroundColor="aqua";
//        不变
        var myvar3=document.getElementById("youbian1");
        myvar3.style.backgroundColor="aqua";
//        改变元素内容
        var nv = document.getElementById("jiewei");
        nv.innerHTML = "选项卡1";



    }
</script>
<!--选项2-->
<script>
    var x = document.getElementById("zhongjian1");
    x.addEventListener("click", method01);
    function method01() {
        //不变
        var myvar1=document.getElementById("zuobian1");
        myvar1.style.backgroundColor="aqua";
        //改变元素属
        var myvar2=document.getElementById("zhongjian1");
        myvar2.style.backgroundColor="GreenYellow";
        //不变
        var myvar3=document.getElementById("youbian1");
        myvar3.style.backgroundColor="aqua";

        //        改变元素内容
        var nv = document.getElementById("jiewei");
        nv.innerHTML = "选项卡2";
    }
</script>
<!--选项3-->
<script>
    var x = document.getElementById("youbian1");
    x.addEventListener("click", method01);
    function method01() {
        //不变
        var myvar1=document.getElementById("zuobian1");
        myvar1.style.backgroundColor="aqua";
        //左边
        var myvar2=document.getElementById("zhongjian1");
        myvar2.style.backgroundColor="aqua";
        //改变元素属
        var myvar3=document.getElementById("youbian1");
        myvar3.style.backgroundColor="GreenYellow";

        //        改变元素内容
        var nv = document.getElementById("jiewei");
        nv.innerHTML = "选项卡3";
    }
</script>



</body>
</html>
css:

*{
    margin: 0px;
    padding: 0px;

}

.zhongjian{
    height: 80px;
    text-align: center;

}
#zuobian1{
    float: left;
    color: #ff0000;
    height: 80px;
    width: 33.3%;
    background-color: GreenYellow;
    line-height: 80px;        /*设置文字行距等于div的高度*/


}
#zhongjian1{
    width: 33.3%;
    height: 80px;
    float: left;
    background-color: aqua;
    line-height: 80px;

}

#youbian1{
    color: #ff0000;
    height: 80px;
    width: 33.3%;
    float: left;
    background-color: aqua;
    line-height: 80px;

}

#jiewei{
    background-color: #cccccc;
    height: 900px;
    font-size: 2cm;
    text-align: center


}

zhaihaohao1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端选项卡demo

html>html>head lang="en"> meta charset="UTF-8"> title>title> link href="css03.css" type="text/css" rel="stylesheet">head>body>div class="zhongjian"> div id="zuobian1">tab1div>
复制链接

扫一扫

专栏目录