2021-08-20-C站初级考试C1-模拟试卷编程题解析-01

最新推荐文章于 2022-06-21 10:58:46 发布

Amoor123

最新推荐文章于 2022-06-21 10:58:46 发布

阅读量273

点赞数

分类专栏： CSDN C认证考试练习文章标签： javascript

本文链接：https://blog.csdn.net/sabian2/article/details/119827441

版权

CSDN C认证考试练习专栏收录该内容

9 篇文章 4 订阅

订阅专栏

这段代码展示了一个HTML页面，包含五个按钮作为选项卡，使用JavaScript实现点击按钮时改变内容区域显示的页面。默认选中第一个按钮并显示对应内容。每个按钮点击时会移除所有按钮的高亮样式，并将当前点击的按钮添加高亮，同时更新内容区域显示对应的页面内容。内容页数与按钮数量对应，用中文数字表示。

摘要由CSDN通过智能技术生成

E卷
在这里插入图片描述

完成效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        form input {
            background:none;
            outline:none;
            border:none;
            float: left;
        }
        .tab {
        display:inline-block;
        width:120px;
        background-color:lightgray;
        color:grey;
        font-size: 24px;
        align-content: center;
        }
        .dab {
            background-color:green;
            color:white;
        }
    </style>
</head>
<body>


<div style="background-color: green;width: 600px" >
    <form action="">
        <input type="button" class="tab" value="Tab1">
        <input type="button" class="tab" value="Tab2">
        <input type="button" class="tab" value="Tab3">
        <input type="button" class="tab" value="Tab4">
        <input type="button" class="tab" value="Tab5">
        <div id="content" style="text-align: center;height:240px;padding-top: 120px;color: white;width: 600px" >这里是第一个页面</div>
    </form>

</div>


<script>
    const lists = document.querySelectorAll(".tab")
    const vv = lists[0]
    const data = ['零','一','二','三','四','五']
    const mydiv = document.getElementById('content')
    vv.classList.add("dab")

    console.log(lists)
    lists.forEach(function (list){
        list.addEventListener('click',function (){
            let num=list.value.toString()
            let n=  parseInt(num[3])
           lists[0].classList.remove("dab")
           lists[1].classList.remove("dab")
           lists[2].classList.remove("dab")
           lists[3].classList.remove("dab")
           lists[4].classList.remove("dab")
            list.classList.add("dab")


            mydiv.innerHTML="这里是第"+data[n]+"个页面"
        })
    })



</script>

</body>
</html>

解析

文档结构为div包装form，form里面是涉及到的所有元素

定义了3个样式

第一个是标签样式，用于修改表单内input的默认样式
第二个tab是描述input的样式，用于默认显示
第三个dab用于后续在函数中修改input的样式

script代码解析

lists = document.querySelectorAll(".tab")
获取所有的tab

const vv = lists[0]
取到第一个

vv.classList.add(“dab”)
给第一个加上点击样式，相当于默认的焦点

const data = [‘零’,‘一’,‘二’,‘三’,‘四’,‘五’]
代表中文数字

const mydiv = document.getElementById(‘content’)
取到内容部分的div标签

lists.forEach(function (list){
list.addEventListener(‘click’,function (){
let num=list.value.toString()
let n= parseInt(num[3])
lists[0].classList.remove(“dab”)
lists[1].classList.remove(“dab”)
lists[2].classList.remove(“dab”)
lists[3].classList.remove(“dab”)
lists[4].classList.remove(“dab”)
list.classList.add(“dab”)
mydiv.innerHTML=“这里是第”+data[n]+“个页面”
})
})

给列表中的每一个项目添加事件句柄，
每次点击移除所有项目的dab样式，并给点击的那个添加dab样式
并修改content的innerHTML