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

网页结构

<!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 2024-05-17 09:48 昨夜小楼听风雨阅读(2) 评论(0) 编辑收藏举报