首页
   /       /   
蓝桥杯(web组)题解-卡片标签化
3月
10
蓝桥杯(web组)题解-卡片标签化
作者:大彭Sir    分类: 学习笔记

背景介绍

选项卡功能在前端开发中特别常见,作为设置选项的模块,每个选项卡代表一个活动的区域,点击不同的区域,即可展现不同的内容,这样既能节约页面的空间又能提升页面性能。

本题需要在已提供的基础项目中使用 JS 完成选项卡功能的编码,最终实现切换选项卡可以显示对应内容的效果。

考试要求

请在 index.js 文件中根据现有 DOM 结构(页面布局部分不能做任何修改操作)实现选项卡动态切换功能。

页面效果如下所示:

代码如下

为了节约时间,写的比较拉,哈哈哈哈哈

// 实现选项卡功能
function init() {
    // TODO 待补充代码
    var red = document.getElementsByClassName("red");
    var green = document.getElementsByClassName("green");
    var blue = document.getElementsByClassName("blue");
    var yellow = document.getElementsByClassName("yellow");
    var one = document.getElementById("one");
    var two = document.getElementById("two");
    var three = document.getElementById("three");
    var four = document.getElementById("four");
    red[0].onclick = function() {
        red[0].className = "red active";
        green[0].className = "red";
        blue[0].className = "blue";
        yellow[0].className = "yellow";
        one.className = 'active';
    };
    green[0].onclick = function() {
        green[0].className = "green active";
        red[0].className = "red";
        blue[0].className = "blue";
        yellow[0].className = "yellow";
        two.className = 'active';
    };
    blue[0].onclick = function() {
        blue[0].className = "blue active";
        green[0].className = "green";
        red[0].className = "red";
        yellow[0].className = "yellow";
        three.className = 'active';
    };
    yellow[0].onclick = function() {
        yellow[0].className = "yellow active";
        green[0].className = "green";
        red[0].className = "red";
        blue[0].className = "blue";
        four.className = 'active';
    };
}
init();
本文标签:标签: javaScript web
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录