使用 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>
相关文章
|
8天前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
14天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
91 1
|
2天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
2天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
JavaScript 开发者
jQuery特效_隐藏与显示 | 学习笔记
快速学习jQuery特效_隐藏与显示
296 0
jQuery特效_隐藏与显示 | 学习笔记
|
JavaScript
jQuery|隐藏和显示
方式一:使用 hide() 和 show() 方法 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素 语法: $(selector).hide(speed,callback); $(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
833 0
|
JavaScript Perl 前端开发
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.14 技巧:隐藏和显示footer
当回去使用在用户滚动页面时会显示和隐藏的普通footer时,也可以通过JavaScript代码来触发footer是隐藏还是显示。代码清单9-16演示了这是如何工作的。
1549 0
|
6月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
30天前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
54 2