溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“jQuery怎么實現HTML元素隱藏和顯示”，在日常操作中，相信很多人在jQuery怎么實現HTML元素隱藏和顯示問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”jQuery怎么實現HTML元素隱藏和顯示”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
讓我們來模仿一下淘寶網當你搜索某個商品的時候，那種顯示全部品牌和顯示部分品牌的功能。
首先我們來理清一下思路：
1、一開始需要先隱藏需要隱藏的元素
2、你需要通過jquery獲取需要在開始顯示的時候需要隱藏的元素對象
3、在頁面寫一個可以觸發點擊事件的按鈕或者鏈接，使用jquery為這個按鈕或者鏈接添加點擊事件
4、當按鈕被點擊的時候，獲取需要隱藏的對象當前是否隱藏值
5、如果是隱藏的，則使其顯示，若不是隱藏的，則讓它隱藏。
下面我們來看代碼：
<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:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style>
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script><!-- 導入jquery的文件 -->
<script type="text/javascript">
$(function(){
$("li:gt(5)").hide();//開始先隱藏第五個li標簽以后的所有li標簽
$("a").click(function(){//為點擊的連接添加點擊事件處理函數
var $flag = $("li:gt(5):lt(6)").is(":hidden");//獲取需要隱藏的元素當前是否隱藏的值
if($flag){//如果當前是隱藏的則執行if下面的代碼
$("li:gt(5):lt(6)").show();//使隱藏的元素顯示出來
$(".showmore a span").css("background","url(img/up.gif) no-repeat 0 0")//是a標簽的圖片變成向上
$(".showmore a span").text("顯示部分語言");//改變a標簽里面的文本，這樣才符合語境
}else{//如果是顯示的 則執行下面的代碼
$(".showmore a span").text("顯示全部語言");//使a標簽的內容變成顯示全部的內容
$(".showmore a span").css("background","url(img/down.gif) no-repeat 0 0");//使a標簽的圖片變成向上
$("li:gt(5):lt(6)").hide();//然后隱藏需要隱藏的內容
}
return false;//最后返回false ，為什么返回false ，因為這樣會阻止鏈接的跳轉
//或者表單按鈕的提交，否則就會跳轉到別的頁面了！
})
});
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li ><a href="#" >C</a></li>
<li ><a href="#" >C++</a></li>
<li ><a href="#" >C#</a></li>
<li ><a href="#" >JAVA</a></li>
<li ><a href="#" >JAVASCRIPT</a></li>
<li ><a href="#" >Python</a></li>
<li ><a href="#" >PHP</a></li>
<li ><a href="#" >GO</a></li>
<li ><a href="#" >SWIFT</a></li>
<li ><a href="#" >RUBY</a></li>
<li ><a href="#" >HTML</a></li>
<li ><a href="#" >匯編</a></li>
<li ><a href="#" >PERL</a></li>
<li ><a href="#" >其它編程語言</a></li>
</ul>
<div class="showmore">
<a href="more.html" ><span>顯示全部語言</span></a><!-- 這里就是這個鏈接，但是點擊不會跳轉。因為上面返回的是false -->
</div>
</div>
</body>
</html>一開始打開是這樣
點擊鏈接之后 觸犯事件函數，那個小三角形是一個圖片，根據狀態的不同，顯示不同的圖片，上面的代碼有寫
if里面
$(".showmore a span").css("background","url(img/up.gif) no-repeat 0 0")
else里面
$(".showmore a span").css("background","url(img/down.gif) no-repeat 0 0")
當然鏈接的文字也發生了改變，這都是需要注意的細節
到此，關于“jQuery怎么實現HTML元素隱藏和顯示”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
