jQuery习题（做一个列表导航栏，鼠标移入哪个li便签，就让这个li便签下面的div的样式由none变为block）

最新推荐文章于 2020-09-16 23:30:14 发布

中国的流浪猫

最新推荐文章于 2020-09-16 23:30:14 发布

阅读量359

点赞数 1

文章标签： js css html jquery

本文链接：https://blog.csdn.net/weixin_46611729/article/details/107586203

版权

里面需要引入"jquery-1.12.4.js"包，需要的可以私聊我
以下是HTML页面的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>中国的流浪猫</title>
    <link rel="stylesheet" href="index.css">
    <style>
    	* {
    margin: 0;
    padding: 0;
}

.box {
    width: 300px;
    height: 360px;
    margin: 50px auto;
    border: 1px solid #000;
}

.box>h1 {
    font-size: 20px;
    line-height: 35px;
    color: #263a68;
    padding-left: 10px;
    border-bottom: 1px dashed #ccc;
}

ul>li {
    list-style: none;
    padding: 5px 10px;
    border: 1px dashed #ccc;
}

ul>li:nth-child(-n+3) span {
    background: #263a68;
}

ul>li>span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #ccc;
    text-align: center;
    line-height: 20px;
    margin-right: 10px;
}

.box .content {
    overflow: hidden;
    margin-top: 5px;
    display: none;
    width: 260px;
    height: 120px;
}

.box .content>img {
    width: 80px;
    height: 120px;
    float: left;
}

.box .content>p {
    width: 180px;
    height: 120px;
    float: right;
    font-size: 12px;
    line-height: 20px;
}
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
    $(function() {
        $("li").hover(function() {
            $(this).children('.content').attr('style', 'display:block');
        }, function() {
            $(this).children('.content').attr('style', 'display:none');
        })
    })
    </script>
</head>

<body>
    <div class="box">
        <h1>美女赏评</h1>
        <ul>
            <li><span>1</span>拿相机的美女
                <div class="content">
                    <img src="images/peri.jpg" alt="">
                    <p>美丽的女子。
                        《墨子·公孟》:"譬若美女，处而不出，人争求之。"
                        《战国策 秦策五》:君之骏马盈外厩，美女充后庭。
                        《史记·外戚世家褚少孙论》:"美女者，恶女之仇。岂不然哉!"
                        南朝·梁江淹《青苔赋》:"妖童出郑，美女生燕。"
                        唐·陈子昂《谏雅州讨生羌书》:"﹝秦惠王﹞乃用张仪计，饰美女，谲金牛，因间以啖蜀。"
                        明 罗贯中 《三国演义》第八回:选民间少年美女八百人实其中，金玉、彩帛、珍珠堆积不知其数;
                        明 罗贯中《三国演义》第一○六回:佳人美女，充满府院。
                        明 冯梦龙《东周列国志》第二回 :"赵叔带乃上表谏曰:'山崩川竭，其象为脂血俱枯，高危下坠，乃国家不祥之兆。况岐山王业所基，一旦崩颓，事非小故。及今勤政恤民，求贤辅政，尚可望消弭天变。奈何不访贤才而访美女乎?"</p>
                </div>
            </li>
            <li><span>2</span>拿相机的美女
                <div class="content">
                    <img src="images/peri.jpg" alt="">
                    <p>美丽的女子。
                        《墨子·公孟》:"譬若美女，处而不出，人争求之。"
                        《战国策 秦策五》:君之骏马盈外厩，美女充后庭。
                        《史记·外戚世家褚少孙论》:"美女者，恶女之仇。岂不然哉!"
                        南朝·梁江淹《青苔赋》:"妖童出郑，美女生燕。"
                        唐·陈子昂《谏雅州讨生羌书》:"﹝秦惠王﹞乃用张仪计，饰美女，谲金牛，因间以啖蜀。"
                        明 罗贯中 《三国演义》第八回:选民间少年美女八百人实其中，金玉、彩帛、珍珠堆积不知其数;
                        明 罗贯中《三国演义》第一○六回:佳人美女，充满府院。
                        明 冯梦龙《东周列国志》第二回 :"赵叔带乃上表谏曰:'山崩川竭，其象为脂血俱枯，高危下坠，乃国家不祥之兆。况岐山王业所基，一旦崩颓，事非小故。及今勤政恤民，求贤辅政，尚可望消弭天变。奈何不访贤才而访美女乎?"</p>
                </div>
            </li>
            <li><span>3</span>拿相机的美女
                <div class="content">
                    <img src="images/peri.jpg" alt="">
                    <p>美丽的女子。
                        《墨子·公孟》:"譬若美女，处而不出，人争求之。"
                        《战国策 秦策五》:君之骏马盈外厩，美女充后庭。
                        《史记·外戚世家褚少孙论》:"美女者，恶女之仇。岂不然哉!"
                        南朝·梁江淹《青苔赋》:"妖童出郑，美女生燕。"
                        唐·陈子昂《谏雅州讨生羌书》:"﹝秦惠王﹞乃用张仪计，饰美女，谲金牛，因间以啖蜀。"
                        明 罗贯中 《三国演义》第八回:选民间少年美女八百人实其中，金玉、彩帛、珍珠堆积不知其数;
                        明 罗贯中《三国演义》第一○六回:佳人美女，充满府院。
                        明 冯梦龙《东周列国志》第二回 :"赵叔带乃上表谏曰:'山崩川竭，其象为脂血俱枯，高危下坠，乃国家不祥之兆。况岐山王业所基，一旦崩颓，事非小故。及今勤政恤民，求贤辅政，尚可望消弭天变。奈何不访贤才而访美女乎?"</p>
                </div>
            </li>
            <li><span>4</span>拿相机的美女
                <div class="content">
                    <img src="images/peri.jpg" alt="">
                    <p>美丽的女子。
                        《墨子·公孟》:"譬若美女，处而不出，人争求之。"
                        《战国策 秦策五》:君之骏马盈外厩，美女充后庭。
                        《史记·外戚世家褚少孙论》:"美女者，恶女之仇。岂不然哉!"
                        南朝·梁江淹《青苔赋》:"妖童出郑，美女生燕。"
                        唐·陈子昂《谏雅州讨生羌书》:"﹝秦惠王﹞乃用张仪计，饰美女，谲金牛，因间以啖蜀。"
                        明 罗贯中 《三国演义》第八回:选民间少年美女八百人实其中，金玉、彩帛、珍珠堆积不知其数;
                        明 罗贯中《三国演义》第一○六回:佳人美女，充满府院。
                        明 冯梦龙《东周列国志》第二回 :"赵叔带乃上表谏曰:'山崩川竭，其象为脂血俱枯，高危下坠，乃国家不祥之兆。况岐山王业所基，一旦崩颓，事非小故。及今勤政恤民，求贤辅政，尚可望消弭天变。奈何不访贤才而访美女乎?"</p>
                </div>
            </li>
            <li><span>5</span>拿相机的美女
                <div class="content">
                    <img src="images/peri.jpg" alt="">
                    <p>美丽的女子。
                        《墨子·公孟》:"譬若美女，处而不出，人争求之。"
                        《战国策 秦策五》:君之骏马盈外厩，美女充后庭。
                        《史记·外戚世家褚少孙论》:"美女者，恶女之仇。岂不然哉!"
                        南朝·梁江淹《青苔赋》:"妖童出郑，美女生燕。"
                        唐·陈子昂《谏雅州讨生羌书》:"﹝秦惠王﹞乃用张仪计，饰美女，谲金牛，因间以啖蜀。"
                        明 罗贯中 《三国演义》第八回:选民间少年美女八百人实其中，金玉、彩帛、珍珠堆积不知其数;
                        明 罗贯中《三国演义》第一○六回:佳人美女，充满府院。
                        明 冯梦龙《东周列国志》第二回 :"赵叔带乃上表谏曰:'山崩川竭，其象为脂血俱枯，高危下坠，乃国家不祥之兆。况岐山王业所基，一旦崩颓，事非小故。及今勤政恤民，求贤辅政，尚可望消弭天变。奈何不访贤才而访美女乎?"</p>
                </div>
            </li>
            <li><span>6</span>拿相机的美女
                <div class="content">
                    <img src="images/peri.jpg" alt="">
                    <p>美丽的女子。
                        《墨子·公孟》:"譬若美女，处而不出，人争求之。"
                        《战国策 秦策五》:君之骏马盈外厩，美女充后庭。
                        《史记·外戚世家褚少孙论》:"美女者，恶女之仇。岂不然哉!"
                        南朝·梁江淹《青苔赋》:"妖童出郑，美女生燕。"
                        唐·陈子昂《谏雅州讨生羌书》:"﹝秦惠王﹞乃用张仪计，饰美女，谲金牛，因间以啖蜀。"
                        明 罗贯中 《三国演义》第八回:选民间少年美女八百人实其中，金玉、彩帛、珍珠堆积不知其数;
                        明 罗贯中《三国演义》第一○六回:佳人美女，充满府院。
                        明 冯梦龙《东周列国志》第二回 :"赵叔带乃上表谏曰:'山崩川竭，其象为脂血俱枯，高危下坠，乃国家不祥之兆。况岐山王业所基，一旦崩颓，事非小故。及今勤政恤民，求贤辅政，尚可望消弭天变。奈何不访贤才而访美女乎?"</p>
                </div>
            </li>
        </ul>
    </div>
</body>

</html>

中国的流浪猫

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery习题（做一个列表导航栏，鼠标移入哪个li便签，就让这个li便签下面的div的样式由none变为block）

里面需要引入"jquery-1.12.4.js"包，需要的可以私聊我以下是HTML页面的代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>中国的流浪猫</title> <link rel="stylesheet" href="index.css"> <style> * {
复制链接

扫一扫