Javascript與jQuery方法的隱藏與顯示
更新時(shí)間：2015年01月19日 11:48:11 投稿：hebedich
這篇文章主要通過(guò)實(shí)例向大家介紹了Javascript與jQuery方法的隱藏與顯示的方法,需要的朋友可以參考下
示例代碼很簡(jiǎn)單，直接奉上，就不多廢話了
復(fù)制代碼 代碼如下:
<html>
<head>
<title>denotoggle</title>
<style>
#box {
width: 100px;
height: 100PX;
background-color: #ddd
}
.show {
visibility: hidden;
}
</style>
<script src="jquery/1.8.2/jquery.min.js"></script>
<!-- //java script方法 -->
<script type="text/javascript">
window.onload = function() {
function toglemain() {
var obj = document.getElementById("box");
if (obj.className == "") {
obj.className = "show";
} else {
obj.className = "";
}
}
var clickbutton = document.getElementById("toggle");
clickbutton.onclick = toglemain; //OnClick方法與Click事件 點(diǎn)擊一下Button，實(shí)際上是先執(zhí)行OnClick方法，但是問(wèn)什么，同時(shí)還出發(fā)了Click事件呢？這是因?yàn)?，OnClick方法內(nèi)部觸發(fā)了Click事件。
}
</script>
<!-- //jQuery Toggle方法 -->
<script type="text/javascript">
$(document).ready(function() {
$(".btn1").click(function() {
/* $("p#box").toggle(); */
$("#box").toggleClass("show");
});
});
</script>
</head>
<body>
<div id="box"></div>
<button id="toggle">javascript toggle</button>
<button class="btn1">jQuery Toggle</button>
</body>
</html>
小伙伴們是否了解清楚了Javascript與jQuery方法的隱藏與顯示的方法了呢，需要的小伙伴自己來(lái)拿走吧。
您可能感興趣的文章:
相關(guān)文章
當(dāng)頁(yè)面打開時(shí)我們需要執(zhí)行一些操作，下面為大家介紹三種不錯(cuò)的方法，大家可以參考下2014-06-06
JQuery學(xué)習(xí)筆記 nt-child的使用
在使用JQuery的時(shí)候如果你想尋找某個(gè)容器（諸如div或者是table中的某些子元素），那么很容易就使用find方法。2011-01-01
jQuery操作checkbox選擇(list/table)
本文將介紹下checkbox list選擇及checkbox table選中附效果圖，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
Jquery為a標(biāo)簽的href賦值實(shí)現(xiàn)代碼
Jquery為a標(biāo)簽的href賦值實(shí)現(xiàn)思路如下：先獲取選中項(xiàng)的值在使用attr屬性為href賦值,有類似需求的朋友可以參考下哈，希望可以幫助到你
2013-05-05 
JQuery是非常棒的JS類庫(kù)，有豐富的UI庫(kù)和插件，不過(guò)我鐘愛(ài)他的是他的選擇器，感覺(jué)其他功能有時(shí)跟后臺(tái)人員距離很遠(yuǎn)，所以一般我也只使用一下他的選擇器。
2009-08-08 
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI實(shí)現(xiàn)樹形網(wǎng)絡(luò)基本操作(2)
這篇文章主要幫助大家輕松學(xué)習(xí)jQuery插件EasyUI，針對(duì)EasyUI實(shí)現(xiàn)樹形網(wǎng)絡(luò)基本操作，分為三大方面：動(dòng)態(tài)加載、添加分頁(yè)、以及惰性加載節(jié)點(diǎn)，感興趣的小伙伴們可以參考一下
2015-11-11 
jQuery 使用手冊(cè)，大家可以耐心的看完，就基本上入門了。
2009-09-09 
jquery ajax 簡(jiǎn)單范例(界面+后臺(tái))
jquery ajax示例包含界面及后臺(tái)部分，經(jīng)測(cè)試效果還不錯(cuò)，喜歡的朋友可以拿去用，或二次修改
2013-11-11 
有的時(shí)候我們希望保留右上的X，同時(shí)使用fancybox 的modal模式，怎么辦呢
2012-10-10