Javascript与jQuery方法的隐藏与显示
如题，代码奉上。
<html>
<head> <title>denotoggle</title> <style>
#box {
width: 100px;
height: 100PX;
background-color: #ddd
} .show {
visibility: hidden;
}
</style>
<script src="http://libs.baidu.com/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事件 点击一下Button，实际上是先执行OnClick方法，但是问什么，同时还出发了Click事件呢？这是因为，OnClick方法内部触发了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>
另求大家补充个jQuery的addClass与remove实现隐藏显示的代码。
Javascript与jQuery方法的隐藏与显示的更多相关文章
- jQuery控制元素隐藏和显示
1.jQuery隐藏和显示效果 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: $("#hide").click(functio ...
- jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画
jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hi ...
- JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）
JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...
- Unity3D方法来隐藏和显示对象
Unity3D作 在使用unity3d开发游戏的过程中.我们经常会遇到须要隐藏或者显示的操作,针对这一点,以下做了一些总结. 一.设置Renderer状态 在游戏的开发中,全部可以被渲染的物体都包括有 ...
- jQuery效果之隐藏与显示、淡入淡出、滑动、回调
隐藏与显示 淡入淡出 滑动效果
- Javascript或jQuery方法产生任意随机整数
方法1:javascritp方法 1 2 3 4 5 6 //随机数 function diu_Randomize(b,e){ if(!b && b!=0 || ! ...
- 简单地做一下“回到顶部”按钮，用jQuery实现其隐藏和显示
1.首先,我们要准备HTML代码: <div id="return-top"> <a href="#top">返回顶部</a> ...
- jquery关于表格隐藏和显示问题
1. 关于指定表格指定列隐藏显示 $(":checkbox[name*=month]").each(function(){ if(!$(this).attr("check ...
- 【记录】jquery动态控制div隐藏或者显示
1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible'); //true为显示,false为隐藏 $("#id").i ...
随机推荐
- OI数据结构&&分治 简单学习笔记
持续更新!!! [例题]简单题(K-D tree) 题目链接 线段树 [例题](环上最大连续和) 给定一个长度为n的环形序列A,其中A1与A_n是相临的,现在有q次修改操作,每次操作会更改其中一个数, ...
- Tomcat开机启动设置
omcat开机启动设置 1.修改/etc/rc.d/rc.local,使用vi /etc/rc.d/rc.local 命令2.在/etc/rc.d/rc.local文件最后添加下面两行脚本 expor ...
- Kalibr installation tutorial
How to install Kalibr I was confused about installing Kalibr, but there is no even one hint in READM ...
- python模块之——tqdm（进度条）
from tqdm import tqdm for i in tqdm(range(10000)): """一些操作""" pass 效果: ...
- vue数据响应的坑
1.首先遇到的第一个坑是数组 vue初始化时,data是一个数组并且为空的时候,里面有一些对象元素,直接改变这些对象的的属性不会触发视图更新 解决办法,copy一个新的数组(vue.assign是浅c ...
- mysql基本用法
mysql的基本用法 一.创建数据库 create database day02 default character set utf8; -- 创建表 create table user( i ...
- CentOS 7 查看和设置防火墙状态
CentOS7 默认使用的是firewall作为防火墙 查看防火墙状态 firewall-cmd --state 停止firewall systemctl stop firewalld.service ...
- （一）Win消息机制，SDK编程基础
一,基本概念 SDK:软件开发工具包(缩写:SDK.外语全称:Software Development Kit) API:应用程序接口 WINAPI:Windows平台下的系统调用,包含 window ...
- linux的sed（增删改查）使用方法
sed的增删改查的基本操作 参考:https://www.cnblogs.com/0zcl/p/6855740.html 01:增(a) 2个sed命令,分别是:(这些操作都是在内存中进行的,所以不会 ...
- JAVA数据结构--AVL树的实现
AVL树的定义 在计算机科学中,AVL树是最先发明的自平衡二叉查找树.在AVL树中任何节点的两个子树的高度最大差别为1,所以它也被称为高度平衡树.查找.插入和删除在平均和最坏情况下的时间复杂度都是.增 ...