显示、隐藏指定元素案例(jq)

朱雀 2021-07-24 16:14 414阅读 0赞

利用show()、hide()或toggle()

代码示例:

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			*{ 
    				margin: 0;
    				padding: 0;
    			}
    			.box{ 
    				width: 600px;
    				text-align: center;
    				border:solid 1px pink;
    				margin:0px auto;
    				padding: 10px;
    			}
    			ul{ 
    				list-style-type: none;
    			}
    			ul li{ 
    				width:150px;
    				display: inline-block;
    				margin: 10px;
    				
    			}
    			button{ 
    				margin:10px;
    			}
    		</style>
    		<script src="js/jquery-3.4.1.js"></script>
    	</head>
    	<body>
    		<div class="box">
    			<ul>
    				<li>1</li>
    				<li class="jp">2</li>
    				<li>3</li>
    				<li>4</li>
    				<li class="jp">5</li>
    				<li class="jp">6</li>
    				<li>7</li>
    				<li class="jp">8</li>
    				<li>9</li>
    				<li>10</li>
    				<li>11</li>
    				<li class="jp">12</li>
    				<li>13</li>
    				<li class="jp">14</li>
    				<li>15</li>
    			</ul>
    			<button>显示</button>
    		</div>
    		
    		
    		<script>
    			$("button").click(function(){ 
    				$(".jp").toggle(2000);
    			})
    		</script>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，414人围观）

还没有评论，来说两句吧...

相关阅读

相关用纯css中hover来显示和隐藏其他元素，如子元素，兄弟元素等（不用js，jq做展示或隐藏）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

港控/mmm°/ 2022年12月10日 07:20/ 0 赞/ 254 阅读

相关 jq删除数组中的指定元素

//删除 for(var k in zjhm_Index_arr){ if(zjhm_Index_arr[k]

迷南。/ 2022年11月19日 11:27/ 0 赞/ 238 阅读

相关 jq基础1——显示隐藏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

以你之姓@/ 2022年10月01日 05:57/ 0 赞/ 152 阅读

相关 css元素的显示和隐藏

接下来的属性它也能控制元素是不是占有原来的位置。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

左手的ㄟ右手/ 2022年09月04日 03:53/ 0 赞/ 232 阅读

相关 javascript隐藏和显示元素

使页面元素隐藏和显示可以有两种方式：方式一：设置元素style属性中的display var t = document.getElementById('test'

傷城~/ 2022年08月18日 11:39/ 0 赞/ 203 阅读

相关如何控制元素显示、隐藏？

http://www.w3school.com.cn/jquery/jquery\_hide\_show.asp ![70][] [70]: /images/2022053

￡神魔★判官ぃ/ 2022年05月30日 05:52/ 0 赞/ 389 阅读

相关 js_元素的隐藏与显示

1. 隐藏显示 display:none visibility:hidden 都是隐藏的意思，但是前者相当于从html中去掉了标签，而后者只是不显示，但是还是占着相应的位

深藏阁楼爱情的钟/ 2022年05月25日 05:44/ 0 赞/ 244 阅读

相关 jquery判断元素是否是隐藏的(隐藏的显示,显示的隐藏)

if(node.is(':hidden')){　　//如果node是隐藏的则显示node元素，否则隐藏　　node.show();　 }else{

梦里梦外;/ 2022年03月25日 05:51/ 0 赞/ 327 阅读

相关显示、隐藏指定元素案例(jq)

利用show()、hide()或toggle() 代码示例: <!DOCTYPE html> <html> <head> <meta

朱雀/ 2021年07月24日 16:14/ 0 赞/ 415 阅读

相关 Bootstrap 页面元素隐藏与显示

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

快来打我*/ 2021年07月04日 23:23/ 0 赞/ 661 阅读