每日作业-Web APIs第07天

最新推荐文章于 2022-03-24 22:51:08 发布

Qiuxuntao

最新推荐文章于 2022-03-24 22:51:08 发布

阅读量578

点赞数

分类专栏：前端文章标签：前端 javascript css3

本文链接：https://blog.csdn.net/Qiuxuntao/article/details/121230321

版权

本文介绍了两个Web APIs的实践案例：一是实现tab栏切换，通过点击按钮改变背景色并显示对应内容；二是设定5秒后自动跳转到百度，并实时更新倒计时。

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

文章目录

- - 一、tab栏切换
  - 二、5s跳转

一、tab栏切换

1.点击界面中按钮，将当前被点击的按钮的背景颜色变为gold色，其他的按钮恢复默认。

2、当点击按钮的时候，需要将这个按钮对应位置的div显示出来

提示

1.让按钮背景颜色变为gold色只需要给按钮的class增加active即可

2.让div显示出来，只需要将div的class增加current即可

3.如何利用自定义属性降按钮与下方盒子建立联系

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .tab_con {
   
            width: 500px;
            height: 350px;
            margin: 50px auto 0;
        }

        .tab_btns {
   
            height: 50px;
        }

        .tab_btns input {
   
            width: 100px;
            height: 50px;
            background: #ddd;
            border: 0px;
            outline: none;
        }

        .tab_btns .active {
   
            background: gold;
        }

        .tab_cons {
   
            height: 300px;
            background: gold;
        }

        .tab_cons div {
   
            height: 300px;
            line-heig

最低0.47元/天解锁文章

Qiuxuntao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
每日作业-Web APIs第07天

文章目录一、tab栏切换二、5s跳转一、tab栏切换 1.点击界面中按钮，将当前被点击的按钮的背景颜色变为gold色，其他的按钮恢复默认。 2、当点击按钮的时候，需要将这个按钮对应位置的div显示出来提示1.让按钮背景颜色变为gold色只需要给按钮的class增加active即可2.让div显示出来，只需要将div的class增加current即可3.如何利用自定义属性降按钮与下方盒子建立联系<!DOCTYPE html><html lang="e
复制链接

扫一扫

专栏目录