HTML+JS+CSS实现选项卡控制标签页的显示或隐藏

最新推荐文章于 2024-08-22 10:47:09 发布

你的大数据学长

最新推荐文章于 2024-08-22 10:47:09 发布

阅读量5k

点赞数 6

分类专栏： HTML 文章标签： css html js javascript

本文链接：https://blog.csdn.net/qq_43198568/article/details/104346026

版权

HTML+JS+CSS实现选项卡控制标签页的显示或隐藏

预计效果
代码
结果展示

预计效果

为了在网页布局有限的区域尽可能多地显示内容，很多网站在首页中普遍采用了选项卡和标签页相结合的内容显示方式。
效果如下图
在这里插入图片描述
当鼠标移动到娱乐的标签上，页面变为如下图

代码

完整代码和需要图片可在我的GitHub中找到，也可自行寻找图片，链接在此

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>>选项卡控制标签页的显示或隐藏</title>
    <style type="text/css">
        *{
    
            font-family: "微软雅黑";
            font-size: 14px;
        }
        a img{
    
            border: none;
        }
        #controlSlide{
    
            width: 360px;
            height: 29px;
            color: #666;
            margin: 0;
            padding: 0;
            background-color: #5899ce;
        }
        #controlSlide li{
    
            float: left;
            width: 45px;
            height: 24px;
            line-height: 24px;
            background-color: #5899ce;
            text-align: center;
            padding-bottom: 3px;
        }
        #controlSlide li a{
    
            text-decoration: none;
            color: #003276;
            cursor: pointer;
        }
        #controlSlide li.current{
    
            width: 45px;
            background-color: black;
        }
        #controlSlide li.current a{
    
            color: white;
        }
        .newImg{
    
            width: 360px;
            height: 220px;
        }
        li{
    
            list-style-type: none;
        }
    </style>
    <script type="text/javascript">
        function setCurrentTab(index) {
    
            for (var i = 1; i <= 8; i++)
            {
    
                if (i == index)
                {
    
                    document.getElementById("slide_" + i).className = "current";
                    document.getElementById(