0
点赞
收藏
分享

微信扫一扫

多个div实现切换功能,点击按钮实现

阎小妍 2022-02-01 阅读 46

多个div实现切换功能,点击按钮实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #tab li {
            float: left;
            list-style: none;
            width: 80px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            text-align: center;
        }
        #container {
            position: relative;
        }
        #content1, #content2, #content3 {
            width: 300px;
            height: 100px;
            padding: 30px;
            position: absolute;
            top: 40px;
            left: 0;
        }
        #tab1, #content1 {
            background-color: #ffcc00;
        }
        #tab2, #content2 {
            background-color: #ff00cc;
        }
        #tab3, #content3 {
            background-color: #00ccff;
        }
    </style>
</head>
<body>
<h2>多Tab点击切换</h2>
<ul id="tab">
    <li id="tab1" value="1">10元套餐</li>
    <li id="tab2" value="2">30元套餐</li>
    <li id="tab3" value="3">50元包月</li>
</ul>
<div id="container">
    <div id="content1">
        10元套餐详情:<br/>&nbsp;每月套餐内拨打100分钟,超出部分2毛/分钟
    </div>
    <div id="content2" style="display: none">
        30元套餐详情:<br/>&nbsp;每月套餐内拨打300分钟,超出部分1.5毛/分钟
    </div>
    <div id="content3" style="display: none">
        50元包月详情:<br/>&nbsp;每月无限量随心打
    </div>
</div>
<script>
    var container=document.querySelectorAll('#container>div')
    var event_li=document.querySelectorAll('#tab>li')
    var currentindex=0
    for(var i=0;i<event_li.length;i++){
        event_li[i].num=i
        event_li[i].onclick=function(){
            container[currentindex].style.display='none'
            var index_other=this.num
            container[index_other].style.display='block'
            currentindex=index_other
        }}
    //jQuery实现,点击一下父元素,最开始的元素的子元素display_none,再将点击事件的元素的子元素设置为display_block

    //jQuery实现,点击一下父元素,子元素全部display_none,再将点击事件的元素的子元素设置为display_block
    //jQuery实现,点击一下父元素,最开始的元素的子元素display_none,再将点击事件的元素的子元素设置为display_block

</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

举报

相关推荐

0 条评论