JQuery实现HTML元素隐藏和显示

最新推荐文章于 2021-06-04 22:37:35 发布

notsaltedfish

最新推荐文章于 2021-06-04 22:37:35 发布

阅读量4.7k

点赞数

分类专栏： Jquery 文章标签： jquery 淘宝网 html

本文链接：https://blog.csdn.net/notsaltedfish/article/details/52206024

版权

本文介绍如何模仿淘宝网的商品搜索功能，控制HTML元素的隐藏和显示。通过JQuery，首先隐藏需要隐藏的元素，然后获取并设置显示元素的状态。利用点击事件，动态改变元素的显示状态，并调整相关视觉效果，如背景图片和文字变化。

摘要由CSDN通过智能技术生成

让我们来模仿一下淘宝网当你搜索某个商品的时候，的那种显示全部品牌和显示部分品牌的功能。

首先我们来理清一下思路;

1：一开始需要先隐藏需要隐藏的元素

2：你需要通过jquery获取需要在开始显示的时候需要隐藏的元素对象

3：在页面写一个可以触发点击事件的按钮或者链接，使用jquery为这个按钮或者链接添加点击事件

4：当按钮被点击的时候，获取需要隐藏的对象当前是否隐藏值

5：如果是隐藏的，则使其显示，若不是隐藏的，则让它隐藏。

下面我们来看代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
		<style type="text/css">
		<!-- 这里是css，这个可以根据你的喜好来调整，这不是重点样式 -->
			*{ margin:0; padding:0;}
			body {font-size:12px;text-align:center;}
			a { color:#04D; text-decoration:none;}
			a:hover { color:#