Javascript与jQuery方法的隐藏与显示_Javascript教程-查字典教程网
Javascript与jQuery方法的隐藏与显示
Javascript与jQuery方法的隐藏与显示
发布时间:2016-12-30 来源:查字典编辑
摘要:示例代码很简单,直接奉上,就不多废话了复制代码代码如下:denotoggle#box{width:100px;height:100PX;ba...

示例代码很简单,直接奉上,就不多废话了

复制代码 代码如下:

<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>

<>

<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事件 点击一下Button,实际上是先执行OnClick方法,但是问什么,同时还出发了Click事件呢?这是因为,OnClick方法内部触发了Click事件。

}

</script>

<>

<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>jQuery Toggle</button>

</body>

</html>

小伙伴们是否了解清楚了Javascript与jQuery方法的隐藏与显示的方法了呢,需要的小伙伴自己来拿走吧。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类