DAY 20——21 下标法案例

最新推荐文章于 2024-09-11 09:30:30 发布

可达可达可达鸭

最新推荐文章于 2024-09-11 09:30:30 发布

阅读量94

点赞数 1

文章标签： javascript css 前端

本文链接：https://blog.youkuaiyun.com/igotosleep/article/details/124869654

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

案例描述
代码部分
总结

案例描述

`如图，打开网页首先会呈现出这样的一个界面
在这里插入图片描述
当我点击另外两个展开按钮时，被点击的模块会展开，其余的模块会收缩。

代码部分

1.Head

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        ul {
            width: 1000px;
            background-color: pink;
        }
        
        li {
            width: 1000px;
            background-color: #00bffc;
        }
        
        p {
            height: 120px;
            font-size: 30px;
            color: #fff;
        }
        
        .s1 {
            background-color: gold;
            height: 300px;
            display: none;
        }
        
        .left {
            margin-left: 20px;
        }
        
        .right {
            float: right;
            margin-right: 20px;
        }
        //展开部分整体大小
        .open {
            height: 420px;
            background-color: #eeeeee;
        }
    </style>
</head>

2.Body

<body>
    <ul>
        <li>
            <p>//利用两个span标签写出蓝色背景图中的文本内容
                <span class="left">全栈技能</span>
                <span class="right">收缩</span>
            </p>
            //section就是图片中黄色部分  display:block-显示，display:none-消失
            <section class="s1" style="display: block;"></section>
        </li>
        <li>
            <p>
                <span class="left">交付技能</span>
                <span class="right">展开</span>
            </p>
            <section class="s1"></section>
        </li>
        <li>
            <p>
                <span class="left">底层技能</span>
                <span class="right">展开</span>
            </p>
            <section class="s1"></section>
        </li>
    </ul>
</body>

3.Script

<script>
	//获取span标签，即“展开”“收缩”按钮
    var span = document.querySelectorAll('.right')
    //获取黄色展开部分，在body标签里我们给了黄色部分一个类名 S1 
    var dSec = document.querySelectorAll('.s1')
    //定义当前展开的模块下表为0
    var index = 0 
    //利用for循环获取每个右边的span标签，且给每个模块添加下标
    for (var i = 0; i < span.length; i++) {
    	//顺序添加下标 0 1 2 
        span[i].index = i 
        //添加点击事件
        span[i].onclick = function() {
        	//先把“展开”写入每个右边的span
            span[index].innerHTML = '展开'
            //通俗的讲点击谁把谁变成“收缩”
            this.innerHTML = '收缩'
            //把每个模块的黄色部分都隐藏
            dSec[index].style.display = 'none'
            
            dSec[this.index].style.display = 'block'
            //把点击的下标添加到之前定义的下标中（因为下标会变得）
            index = this.index 
        }
    }
</script>