首页 > 其他分享 >网页布局------鼠标点击标签切换内容

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

时间：2024-05-17 09:53:20浏览次数：22  
标签：body right 网页 鼠标 li content ------ brick height

网页结构

<!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();   //控制内容显示
               
            })
        })

 

标签：body,right,网页,鼠标,li,content,------,brick,height
From： https://www.cnblogs.com/lixianhui/p/18196779

相关文章

  • springboot集成@DS注解实现数据源切换(转载)
    springboot集成@DS注解实现数据源切换启用@DS实现数据源切换POM内添加核心jar包yml配置"核心"-使用@DS注解最后启用@DS实现数据源切换POM内添加核心jar包 <dependency><groupId>com.baomidou</groupId><artifactId>dynamic-datasource-spring-boot-start......
  • springboot怎么将List集合数据转成JSON数组
    SpringBoot默认使用Jackson框架将Java对象转换成JSON格式。要转换List集合数据为JSON数组，可以采用以下两种方法：1.使用@ResponseBody注解在SpringBoot中，可以使用@ResponseBody注解标注要返回的List集合数据，让Spring自动将其转换成JSON数组。例如：@GetMapping("/list")@Respo......
  • NX(DEP)、Canary(FS)、 RELRO(ASLR)、PIE编译选项
    CANARY(栈保护溢出标志)这个选项表示栈保护功能有没有开启。栈溢出保护是一种缓冲区溢出攻击缓解手段,当函数存在缓冲区溢出攻击漏洞时,攻击者可以覆盖站上的返回地址来让shellcode能够得到执行。当启动栈保护后,函数开始执行的时候会先往栈里插入cookie信息,当但会真正返回的时......
  • 关于SpringBoot项目使用Hutool工具进行json序列化时出现Null值过滤或者丢失的问题(转
    ##问题描述：SpringBoot项目中，一直使用的时Hutool的json转换工具，被强制要求不能使用fastJson工具；之前都没什么问题，突然有一次使用parseObj()进行json字符串转换json对象时，突然报错：Noserializerfoundforclasscn.hutool.json.JSONNullandnopropertiesdiscoveredtocreate......
  • 界面组件DevExpress WPF中文教程 - 如何从CRTX模板文件导入图表设置
    DevExpressWPF 拥有120+个控件和库，将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpressWPF能创建有着强大互动功能的XAML基础应用程序，这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。无论是Office办公软件的衍伸产品，还是以数据为中......
  • 三个字段拼接，为空的不显示
    publicStringconcatenateFields(Stringfield1,Stringfield2,Stringfield3){StringBuildersb=newStringBuilder();booleanseparatorAdded=false;if(field1!=null&&!field1.isEmpty()){sb.append(field1)......
  • 第四节：MySQL主从集群搭建、扩容与数据迁移、半同步复制详解
    一.        二.        三.         !作       者:Yaopengfei(姚鹏飞)博客地址:http://www.cnblogs.com/yaopengfei/声     明1:如有错误，欢迎讨论，请勿谩骂^_^。声     明2:原创博客请在转载......
  • Docker 部署Nacos
    1、创建Nacos目录mkdir/home/docker/nacos2、创建Nacos日志目录mkdir/home/docker/nacos/logs3、创建Nacos配置目录mkdir/home/docker/nacos/conf4、创建数据库/**Copyright1999-2018AlibabaGroupHoldingLtd.**LicensedundertheApacheLicense,Ver......
  • Python数据分析与挖掘实战（1-3章）
    非原创，仅个人关于《Python数据分析与挖掘实战》的学习笔记第一章基础略第二章数据分析简介基本概念元组、列表、字典、集合函数式编程：map()函数：定义一个函数，然后用map()逐一应用到map列表中的每个元素。map(lambdax+2:a)reduce()函数：用于递归计算。reduce(lambdax,......
  • java01基础入门
    java01基础入门准备javac-versionjava-versioncd..//回到上一级勾选文件扩展名设置Path环境变量IDEA创建工程开发步骤project->module->package->class设置主题、字体快捷键注释关键字基本组成：由数字、字母、下划线(_)和美元符($)等组......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99