Pink老师JavaScript课堂案例 - 点击选项卡切换内容

最新推荐文章于 2022-10-20 22:24:00 发布

Codefreyy

最新推荐文章于 2022-10-20 22:24:00 发布

阅读量1.3k

点赞数 4

分类专栏：课程案例文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/godfreyyyy/article/details/123461321

版权

本文通过Pink老师的JavaScript课堂案例，介绍如何使用JavaScript实现点击不同的选项卡，动态切换显示相应的内容，提升前端交互体验。内容包括选项卡的HTML结构、CSS样式设置以及JavaScript事件处理代码详解。

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

效果：

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

<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>
        /* 选项卡的样式设置 */
        .tab {
            position: relative;
            width: 680px;
            height: 900px;
        }
        
        .tab_list li {
            float: left;
            /* 让li没有小圆点 */
            list-style: none;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            /* 鼠标经过时，光标变成手指在点击的样子*/
            cursor: pointer;