js制作选项卡：实现点击选项卡会跳转到相应的页面

最新推荐文章于 2023-03-31 14:51:32 发布

陌依依

最新推荐文章于 2023-03-31 14:51:32 发布

阅读量3.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： web前端开发文章标签： javascript css html 开发语言 web

本文链接：https://blog.csdn.net/a1598452168YY/article/details/127408868

本文介绍了如何使用JavaScript、CSS和HTML制作选项卡，实现点击选项卡时不仅改变样式，还能跳转到相应的页面。分别展示了简易选项卡的制作和难度升级后的选项卡，后者具有QQ应用底部导航栏的类似功能，通过循环和事件监听实现不同选项卡与内容区域的联动切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、制作简易选项卡（只制作开头）

目标：点击“正在播出”css样式就到了它身上，而“即将上映”没有样式；同样当点击“即将上映”样式就转换到它这里来了

重点思路：给两个标签都绑上点击事件，先将class选择器选择的属性写好，然后通过classList给标签增加这个类名或者移除这个类名来控制。

具体的代码思路是：先写好class选择器样式：见“.active{}”，然后第一个li标签点击事件要执行的代码是：当点击“正在播出”，它增加“active”这个类名，赋予属性，然后移除另一个item2的“active”属性；当点击item2时，给item2增加“active”属性，删除item1的“active”属性。

核心代码：画红圈的那个

完整代码：

<!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>
        *{
            margin: 0%;
            padding: 0%;
        }
        ul{
            list-style: none;
            display: flex;
        }
        li{
            height: 50px;
            line-height: 50px;
            text-align: center;
            flex: 1;
        }
        .active{
            color: red;
            border-bottom: 1px solid red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="active" id="item1">正在播出</li>