用jQuery写一个简单的列表

最新推荐文章于 2022-09-03 09:31:48 发布
最新推荐文章于 2022-09-03 09:31:48 发布
阅读量320 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/finedayforu/article/details/104154600
版权

鼠标移入<li>会打开，移出关闭。

v2-485626c485362ebd72bbaf5085cb8d99_b.jpg

v2-ce593ce9129fd727589a0f9949038a7f_b.jpg

源码：

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .main{
            width: 376px;
            height: 500px;
            border: solid black 1px;
            margin: 100px auto;
        }
        .title{
            font:bold 1.7em "黑体";
            color: hotpink;
            text-align: center;
        }
        li{

            border: dashed gray 1px;
            padding: 5px 10px;
            overflow: hidden;
        }
        .index{
            display: inline-block;
            background-color: hotpink;
            width: 20px;
            text-align: center;
            margin-right: 10px;
        }
        .content{
            margin: 10px 0;
            display: none;
        }
        .descript{
            width: 70%;
            float: right
        }
        .open>.content{
            display: block;
        }
    </style>
    <script
        src='https://code.jquery.com/jquery-1.12.4.js'
        integrity='sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU='
        crossorigin='anonymous'>
    </script>
    <script>
        $(document).ready(function(){
            $("li").hover(
                function(){
                    $(this).addClass("open");
                },
                function(){
                    $(this).removeClass("open");
                });
        });
    </script>
</head>
<body>
    <div class="main">
        <p class="title">电影排行榜</p>
        <ul>        
            <li>
                <span  class="index">1</span>
                <span class="top">电影名称</span><br>
                <div class="content">
                    <img src="images/1.jpg" alt="">
                    <div class="descript">
                        <p >2009年以来，中央财政开始大力支持新能源汽车推广应用。经过十年发展，我国新能源汽车产业迈入攻坚克难、爬坡过槛的关键阶段，加快从追求发展数量向以提高发展质量和效益转变。2018年，我国新能源汽车产销达127万辆和125.6万辆</p>
                    </div>
                </div>
            </li>
            <li>
                <span  class="index">2</span>
                <span class="top">电影名称</span><br>
                <div class="content">
                    <img src="images/1.jpg" alt="">
                    <div class="descript">
                        <p >2009年以来，中央财政开始大力支持新能源汽车推广应用。经过十年发展，我国新能源汽车产业迈入攻坚克难、爬坡过槛的关键阶段，加快从追求发展数量向以提高发展质量和效益转变。2018年，我国新能源汽车产销达127万辆和125.6万辆</p>
                    </div>
                </div>
            </li>
            <li>
                <span  class="index">3</span>
                <span class="top">电影名称</span><br>
                <div class="content">
                    <img src="images/1.jpg" alt="">
                    <div class="descript">
                        <p >2009年以来，中央财政开始大力支持新能源汽车推广应用。经过十年发展，我国新能源汽车产业迈入攻坚克难、爬坡过槛的关键阶段，加快从追求发展数量向以提高发展质量和效益转变。2018年，我国新能源汽车产销达127万辆和125.6万辆</p>
                    </div>
                </div>
            </li>
            <li>
                <span  class="index">4</span>
                <span class="top">电影名称</span><br>
                <div class="content">
                    <img src="images/1.jpg" alt="">
                    <div class="descript">
                        <p >2009年以来，中央财政开始大力支持新能源汽车推广应用。经过十年发展，我国新能源汽车产业迈入攻坚克难、爬坡过槛的关键阶段，加快从追求发展数量向以提高发展质量和效益转变。2018年，我国新能源汽车产销达127万辆和125.6万辆</p>
                    </div>
                </div>
            </li>
            <li>
                <span  class="index">5</span>
                <span class="top">电影名称</span><br>
                <div class="content">
                    <img src="images/1.jpg" alt="">
                    <div class="descript">
                        <p >2009年以来，中央财政开始大力支持新能源汽车推广应用。经过十年发展，我国新能源汽车产业迈入攻坚克难、爬坡过槛的关键阶段，加快从追求发展数量向以提高发展质量和效益转变。2018年，我国新能源汽车产销达127万辆和125.6万辆</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    
</body>
</html>

finedayforu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery新闻列表动态显示效果
03-20
NULL 博文链接：https://345161974.iteye.com/blog/830125
jQuery写一个简单的列表样式
q_2540638774的博客
10-23 479
一、今天又学了jQuery的各种知识，就写了一个关于列表的样式，效果如下图： 代码也比较简单，我们直接来看代码： 1、首先先写HTML代码，主要使用四个主菜单、若干个子菜单、以及div来写的，代码如下（注：这里主要是用ul、li和div标签的混用）： <ul class="zhu"> <div class="menu1"> <li> 菜单一 ...
JQuery+CSS实现列表清单
愤怒的小兵
03-01 467
JQuery+CSS实现列表清单开发环境实现效果代码实现 开发环境 Jquery-3.3.1，CSS 实现效果 表格内容显示，分页器样式 代码实现 HTML部分 &lt;!DOCTYPE html&gt; &lt;head&gt; &lt;title&gt;浮动菜单&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" hre
jQuery选择器列表清单
irose的博客
10-07 475
实例 选取 $("*") $("*") $("#lastname") 所有 class=“intro” 的元素 $(".intro") 所有 class=“intro” 的元素 $(“p”) 所有 p元素 $(".intro.demo") 所有 class=“intro” 且 class=“demo” 的元素 $(“p:first”) 第一个 p 元素 $(...
使用Ajax+JQuery构造分页查询列表
Reiner的专栏
09-05 539
使用Ajax+JQuery构造分页查询列表
jQuery实现简单的列表式导航菜单效果代码
11-25
这里使用jQuery实现简单的列表式导航菜单，是根据网上的一个教程，边看边写的，经过了修正，拷贝代码即可使用。主要实现包括三个部分，一是CSS、二是引入jQuery、三是编写JS代码进行jQuery控件。 运行效果截图如下：...
一个JQuery写的点击上下滚动的小例子
10-28
标题中的“一个JQuery写的点击上下滚动的小例子”是指使用jQuery库实现的一种用户交互功能，允许用户通过点击按钮来上下滚动页面内的内容，而不是自动滚动。这个功能在很多网页设计中都有应用，例如新闻列表或者产品...
jQuery模仿ToDoList实现简单的待办事项列表
01-21
功能：在文本框中输入待办事项按下回车后，事项会...先把css样式以及js文件引入进来，jQuery文件要写在你自己的js文件上边 <link rel=stylesheet href=css/index.css rel=external nofollow > <script src=js
自己写的一个简单的jquery 日期插件
04-12
【标题】：“自己写的一个简单的jquery 日期插件” 这篇博客是作者分享的关于自己创建的一个基于jQuery的简单日期插件。在JavaScript编程中，日期处理是一个常见的需求，尤其是在网页应用中，用户可能需要选择日期...
使用 jquery 写的 Music 播放器网页版
最新发布
12-14
本项目“使用jQuery写的Music播放器网页版”旨在利用jQuery这一强大的JavaScript库来实现这一目标。jQuery简化了DOM操作、事件处理、动画效果以及Ajax交互，使得开发过程更为高效和简洁。 ### 1. jQuery基础 ...
JQuery Mobile简单列表实现
05-26
使用JQuery Mobile编写的简单列表实例，实例采用了两种不同的样式风格
jquery+js实现动态表格的创建及列表全选等操作
qq_36760873的博客
10-06 848
jquery+js实现动态表格的创建及列表全选等操作 1.效果图附上： 2.代码呈上： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.min.js" type="tex...
使用jQuery实现信息基本的增、删、改、查。
weixin_63112037的博客
09-03 535
3、点击查询，输入姓或名，自动与之匹配，有则显示出来，无则其他信息隐藏。2、点击修改，对已添加的信息可以进行修改，修改完成，信息自动保存修改。1、点击增加弹出表单，填写完成提交，本地存储新增一组信息。4、点击删除，删除选中的信息，本地存储信息同时删除。
jQuery的9种方式实现下拉列表
车联网开发的博客
08-18 8014
利用基本动画、滑动动画、淡入淡出、自定义动画和事件实现下拉列表框。我只是将所学的知识统统实现了一遍，但是如果加上排列和组合不止这九种。（这么神奇，又在吹牛吧。）附代码如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;
jquery实现动态创建页面元素(ul,li列表实例)
热门推荐
qiang_java的博客
10-18 2万+
本来生成层数也想用change方法但是发现动态生成的元素jquery不管哪种选择器都获取不到，所以只好写了onclick方法点击实现生成，如果哪位好汉有比较巧妙地方法评论介绍一下！ 层级也没写太多，不过方法是一样的，嵌套进去就行，举个例子顺便记录一下，怕时间久远忘掉
jQuery实现的list列表
William.Yao的博客
11-08 5495
<div class="menu" id="menu"> <div> <p>Web前端</p> <ul style="display:block"> <li>JavaScript</li> <li>DIV+CSS</li> <li>jQuer
JQuery实现可编辑的表格
冯浩月
03-12 3611
前言   我们知道jQuery是一个轻便的JavaScript框架，里面封装了系统和程序常用到的一些方法，利用CSS、HTML可以将这些内容运用起来，做出各式各样好看的界面，下面小编使用jQuery实现了一个“可编辑的表格”的例子。代码加说明一、HTML代码1.使用&lt;thead&gt;&lt;/thead&gt;实现标头；2.一个table中可以包含thead和tbody3.表头的内容可以放...
用jquery做一个列表上下移动和置顶/低
leiyanhongfhc的博客
08-24 492
列表上下移动和置顶/低      .active{             background: pink;         }         p {         width: 400px;                 }                     黄   总         上移         下移        
用jquery写一个简易留言板
06-02
好的，以下是一个简易留言板的jQuery代码示例： HTML部分： ```html 留言板 姓名: <input type="text" id="name" name="name"><br> 留言内容: <textarea id="message" name="message"></textarea> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值