Javascript與jQuery方法的隱藏與顯示
更新時(shí)間:2015年01月19日 11:48:11 投稿:hebedich
這篇文章主要通過實(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方法,但是問什么,同時(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方法的隱藏與顯示的方法了呢,需要的小伙伴自己來拿走吧。
您可能感興趣的文章:
相關(guān)文章
JQuery學(xué)習(xí)筆記 nt-child的使用
在使用JQuery的時(shí)候如果你想尋找某個(gè)容器(諸如div或者是table中的某些子元素),那么很容易就使用find方法。2011-01-01jQuery操作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 
輕松學(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 ajax 簡(jiǎn)單范例(界面+后臺(tái))
jquery ajax示例包含界面及后臺(tái)部分,經(jīng)測(cè)試效果還不錯(cuò),喜歡的朋友可以拿去用,或二次修改
2013-11-11