使用 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>
相关文章
|
4天前
|
前端开发 JavaScript
CSS进阶-CSS选择器高级:伪类与伪元素
【6月更文挑战第13天】本文探讨了CSS伪类与伪元素的核心概念,包括伪类表示元素状态,伪元素创造抽象内容。常见问题涉及二者区别、冒号使用、顺序优先级及`content`属性。实践技巧涵盖`:not()`选择器、`:hover`与子元素伪类结合及自定义形状。通过代码示例展示了高亮悬停行、添加图标、首行样式和链接颜色的应用。理解并熟练运用伪类和伪元素可提升CSS设计效率和灵活性。
CSS进阶-CSS选择器高级:伪类与伪元素
|
10天前
|
前端开发
CSS基础-CSS选择器:ID、Class、Tag
【6月更文挑战第7天】本文介绍了CSS中的三种基本选择器:ID、Class和Tag选择器。Tag选择器适用于统一设置同类型元素样式,但可能造成样式泛化;Class选择器灵活性高,适合复用,注意命名规范和避免过度使用;ID选择器具有最高优先级,用于唯一标识,应谨慎使用。理解其特点和场景,结合良好命名规范,能提升CSS代码效率和可维护性。
|
11天前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
18 1
|
11天前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
24 1
|
17天前
|
前端开发
要使用CSS选择器选中特定类别的元素
【5月更文挑战第31天】要使用CSS选择器选中特定类别的元素
20 2
|
17天前
|
前端开发
CSS选择器
【5月更文挑战第31天】CSS选择器
20 1
|
28天前
|
前端开发
CSS分组和嵌套选择器
CSS分组和嵌套选择器。
22 1
|
1月前
|
前端开发
前端 css 经典:选择器速记
前端 css 经典:选择器速记
25 0
|
1月前
|
前端开发 数据安全/隐私保护
利用 HBuilderX 设置CSS样式会员注册页面
利用 HBuilderX 设置CSS样式会员注册页面
24 1
|
1月前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性