Javascript与jQuery方法的隐藏与显示
示例代码很简单,直接奉上,就不多废话了
<html>
<head>
<title>denotoggle</title>
<style>
#box{
width:100px;
height:100PX;
background-color:#ddd
}
.show{
visibility:hidden;
}
</style>
<scriptsrc="jquery/1.8.2/jquery.min.js"></script>
<!--//javascript方法-->
<scripttype="text/javascript">
window.onload=function(){
functiontoglemain(){
varobj=document.getElementById("box");
if(obj.className==""){
obj.className="show";
}else{
obj.className="";
}
}
varclickbutton=document.getElementById("toggle");
clickbutton.onclick=toglemain;//OnClick方法与Click事件点击一下Button,实际上是先执行OnClick方法,但是问什么,同时还出发了Click事件呢?这是因为,OnClick方法内部触发了Click事件。
}
</script>
<!--//jQueryToggle方法-->
<scripttype="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
/*$("p#box").toggle();*/
$("#box").toggleClass("show");
});
});
</script>
</head>
<body>
<divid="box"></div>
<buttonid="toggle">javascripttoggle</button>
<buttonclass="btn1">jQueryToggle</button>
</body>
</html>
小伙伴们是否了解清楚了Javascript与jQuery方法的隐藏与显示的方法了呢,需要的小伙伴自己来拿走吧。
热门推荐
10 好朋友夫妻祝福语简短
11 年月日祝福语简短
12 老人过大寿祝福语简短
13 祝老婆生日祝福语简短
14 给婴儿祝福语简短的话
15 老师祝福语简短100字
16 青春告白祖国简短祝福语
17 许嵩生日祝福语简短
18 职场祝福语大全 简短精辟