随笔 - 111  文章 - 0  评论 - 1  阅读 - 30133

网页布局------鼠标点击标签切换内容

网页结构

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <style>
        .tables{
            color: aqua;
        }
    </style>
    <script>
        $(function(){
            $(".body-brick-content-right ul:gt(0)").hide();
            $(".body-brick-title-right li").eq(0).addClass("tables");
            $(".body-brick-title-right li").click(function(){
                $(this).addClass("tables");
                $(this).siblings().removeClass("tables");
                $('.body-brick-content-right ul' ).eq($(this).index()).siblings().hide().end().show();
               
            })
        })
    </script>
    <link rel="stylesheet" href="./header.css">
</head>
<body>
    <div class="body-contaner">
        <div class="body-content">
            <div class="body-brick">
                <div class="body-brick-title">
                    <h2 class="body-brick-title-h2"> 生活电器</h2>
                    <div class="body-brick-title-right">
                        <ul>
                            <li>电暖器</li>
                            <li>扫地机</li>
                            <li>空净</li>
                        </ul>
                    </div>
                </div>
                <div class="body-brick-content">
                    <div class="body-brick-content-left">
                        <ul>
                            <li><a> <img src="./images/3d47879ec183e25a36e67e0219636e60.jpg" /> </a></li>
                            <li><a> <img src="./images/3d47879ec183e25a36e67e0219636e60.jpg" /> </a></li>
                        </ul>

                    </div>
                    <div class="body-brick-content-right">
                        <ul>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                        </ul>
                        <ul>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>

                        </ul>
                        <ul>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                            <li class="body-brick-content-right-ul-li">
                                <a>
                                    <div class="body-brick-content-right-div">
                                        <img src="./images/e7c6e79433c883e1a022ec21402c1679.jpg" />
                                    </div>
                                    <h2>米家电暖器 温控版</h2>
                                    <p class="body-brick-content-right-text1">2200W 强劲功率，对流速热，居浴两用</p>
                                    <p class="body-brick-content-right-text2">3290元</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
View Code
复制代码

网页样式

复制代码
.body-contaner{
    width: 100%;
    height: 100%;
    background: #f5f5f5;
}
.body-content{
    width: 1226px;
    height: 100%;
    margin: 0 auto;
    /* background-color: antiquewhite; */
    padding: 4px 0 12px;
}
body-brick{
    margin-bottom: 8px;
    clear: both;
}
.body-brick-title{
    width: 1226px;
    height: 58px;
    /* background-color: #e0e0e0; */

}
.body-brick-title-h2{
    float: left;
    /* text-align: center; */
    line-height: 58px;
    font-weight: 200;
    font-size: 22px;
}
.body-brick-title-right{
    float: right;
    width: 280px;
    height: 58px;
    /* background-color: #FF6700; */
    /* line-height: 58px; */

}
.body-brick-title-right>ul{
    
    width: 280px;
    height: 41px;
   
    padding: 16px 0 0;
}
.body-brick-title-right>ul>li{
    float: left;
    width: 48px;
    height: 24px;
    margin-left: 22px;
}
.body-brick-title-right-ul-li-hover{
    color: #FF6700; 
 border-bottom: 2px solid #FF6700;
}
/* 标签悬浮切换 */



.body-brick-content{
    height: 614px;
    /* background-color: #FF6700; */
}
.body-brick-content-left{
    width: 234px;
    height: 614px;
    float: left;
    /* background-color: #aaa; */
}
.body-brick-content-left>ul>li{
    width: 234px;
    height: 300px;
    margin: 0 0 14px 0px;
}
.body-brick-content-left>ul>li>img{
    width: 100%;
    height: 100%;
}
.body-brick-content-left>ul>li>a{
    display: block;
    width: 234px;
    height: 300px;
}
.body-brick-content-left>ul>li:nth-child(1){
    margin-bottom: 14px;
}
.body-brick-content-left>ul>li:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .18);
}
.body-brick-content-right{
    width: 992px;
    height: 628px;
    /* background-color: #FF6700; */
    float: left;
}
.body-brick-content-right>ul{
    /* margin: 0 0  -14px 14px; */
}
.body-brick-content-right-ul-li{
    float: left;
    background-color: #fff;
    width: 234px;
    height: 260px;
    padding: 20px 0;
    margin: 0 0 14px 14px;
}
.body-brick-content-right>ul>li>a{
    display: block;
    width: 234px;
    height: 260px;
    /* padding: 20px 0; */
}
.body-brick-content-right-div{
    width: 160px;
    height: 160px;
    margin: 0 37px 18px;

}
.body-brick-content-right-div img{
    width: 100%;
    height: 100%;
}
.body-brick-content-right>ul>li>a>h2{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400;
    margin: 0 10px 2px;
}
.body-brick-content-right-text1{
    font-size: 12px;
    color: #b0b0b0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 10px 10px;
}
.body-brick-content-right-text2{
    font-size: 12px;
    color: #FF6700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 10px 14px;
}
.body-brick-content-right-li1{
    width: 234px;
    height: 93px;
    margin: 0 0 14px 14px;
    background-color: #ff6700;
}
.body-brick-content-right-li2{
    width: 234px;
    height: 93px;
}
.body-brick-content-right-li{
    float: left;
    width: 234px;
    height:300px;
}
.body-brick-content-right-li>ul>li{
    width: 234px;
    height: 143px;

    margin: 0 0 14px 14px;
    background-color: #fff;
}
.body-brick-content-right-li>ul>li>a{
    display: block;
    width: 234px;
    height: 93px;
    padding-top: 50px;
}
.body-brick-content-right-li-left{
    width: 94px;
    height: 32px;
    margin-left: 30px;
}
.body-brick-content-right-li-left>h3{
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 10px;
}
.body-brick-content-right-li-left>p{
    font-size: 12px;
    color: #FF6700;
}
.body-brick-content-right-li-left{
    float: left;
}
.body-brick-content-right-li-right{
    width: 80px;
    height: 80px;
    float: left;
    margin-left: 15px;
    margin-top: -10px;
}
.body-brick-content-right-li-right>img{
    width: 100%;
    height: 100%;
}
.body-brick-content-right-ul-li:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .18);
}
.body-brick-content-right-li>ul>li:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .18);
}
  tables{
          color: aqua;
  }
View Code
复制代码

实现功能

复制代码
 $(function(){
            $(".body-brick-content-right ul:gt(0)").hide();     //将除了第一个内容之外的其他内容隐藏掉，使用:gt(0)
            $(".body-brick-title-right li").eq(0).addClass("tables"); //默认第一个标签显示的颜色，使用eq(0)确认第一个标签，使用addClass为标签添加颜色里面的数值为class的内容
            $(".body-brick-title-right li").click(function(){　　　　//设置点击效果
                $(this).addClass("tables");　　　　　　　　　　　//点击对应标签时为标签添加颜色
                $(this).siblings().removeClass("tables");　　　　　//点击对应标签时为其他标签去除class定义的颜色
                $('.body-brick-content-right ul' ).eq($(this).index()).siblings().hide().end().show();   //控制内容显示
               
            })
        })
复制代码

 

posted on   昨夜小楼听风雨  阅读(12)  评论(0)  编辑  收藏  举报
相关博文：
·  网页布局------鼠标悬停标签切换内容
·  网页布局------小米商城页面布局
·  （学习日记）二、CSS样式
·  html 笔记
·  css 常用代码片段
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话
历史上的今天：
2022-05-17 虚拟机连接xchll
2022-05-17 没有虚拟机网怎么弄
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

Powered by: 博客园 Copyright © 2025 昨夜小楼听风雨
Powered by .NET 9.0 on Kubernetes
点击右上角即可分享
微信分享提示
SQL AI 助手