使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。

简介: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。

需求说明:


使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。

具体要求如下:

在页面中显示电影排行榜

当单击“(收起)”链接时,排行榜中后三项的电影名称隐藏而且链接的文本更改为“(展开)

” 当单击“(展开)”的链接时,后三项的电影名称重新显示且链接的文本更改为“(收起)”


62.png63.png


实现思路:


新建 HTML 页面,使用 <h3> 和 <ul> 等标签制作页面加载时的初始效果

在页面加载完毕事件中,给 <a href="#">(收起)</a> 标签的单击事件绑定方法

在 <a> 标签的点击事件方法中判断无序列表的后三项是否可见。若可见,利用 css() 方法把后三项的display 属性设置成“none”,再利用 text() 方法,改变 <a> 标签的文本为“展开”;若不可见,利用 css() 方法把后三项的 display 属性设置成“list-item”,再利用 text() 方法,改变 <a> 标签的文本为“收起”


实现代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(function(){
        $("a[href='#']").click(function(){
          var flag = $("ul li:gt(4)").is(":visible");
          if (flag) {
            $("ul li:gt(4)").css("display","none")
            $(this).text("(展开)")
          } else{
            $("ul li:gt(4)").css("display","list-item")
            $(this).text("(收起)")
          }
        })
      })
    </script>
  </head>
  <body>
    <h3>影视排行榜<a href="#">(收起)</a></h3>
    <ul>
      <li>捉妖记 2</li>
      <li>战狼 2</li>
      <li>奇门遁甲</li>
      <li>猫妖传</li>
      <li>时空终点</li>
      <li>前任3:再见前任</li>
      <li>冰雪奇缘</li>
      <li>极品飞车</li>
    </ul>
  </body>
</html>
相关文章
|
1月前
|
XML JavaScript 数据格式
jQuery - 获取内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法。
36 6
|
17天前
|
缓存 监控 前端开发
CSS 提高性能的方法
【10月更文挑战第24天】在实际应用中,还需要根据具体项目的特点和需求,灵活选择和组合这些方法,不断进行优化和改进。同时,随着技术的不断发展,也需要持续关注新的性能优化技巧和最佳实践,以保持在性能优化方面的领先地位。你对 CSS 性能优化还有哪些深入的思考和经验呢?欢迎进一步交流和分享。
|
19天前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
29 2
|
20天前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
1月前
|
存储 JavaScript 前端开发
jQuery 对属性的操作
【10月更文挑战第8天】
|
1月前
|
前端开发 容器
CSS 中几种常用的换行方法
CSS 中几种常用的换行方法
25 1
|
2月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
15 2
|
1月前
|
前端开发 UED
css性能优化的方法
css性能优化的方法
22 0
|
1月前
|
前端开发
CSS常见的选择器
CSS常见的选择器
18 0
|
1月前
|
前端开发
CSS绘制三角形的方法
CSS绘制三角形的方法

热门文章

最新文章