js 控制展开折叠 div html dom

js 控制展开折叠 div    html dom

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Title</title>
</head>
<body>
<!-- js 控制 展开 隐藏div  -->
<img src="image/down.png" onclick="test(this)">   <!--this 指 img 对象  -->

<div id="div2" style="border:1px solid #ccc; width:300px; height:200px; display: block;">
    (1)每个HTML标记都有事件句柄属性。onClick是HTML标记属性,不分大小写。
    (2)HTML标记对应的元素对象也具有事件句柄属性,这个属性必须全小写,因JS区分大小写
</div>
</body>
</html>
<script type="text/javascript">
function test(obj){

    var div1=document.getElementById("div2");
    if(div1.style.display=="block"){
        div1.style.display="none";
        obj.src="image/up.png";
    }else{
        div1.style.display="block";
        obj.src="image/down.png";
    }
}
</script>
时间: 2024-08-06 03:40:57

js 控制展开折叠 div html dom的相关文章

js控制多个div之间的切换

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>div隐藏与显示</title><script type="text/javascript">function changeBody(index){ switch(index){ case 1:{ docu

js控制treeview默认展开

bootStrapTreeview 在bootstrap的treeview官网,可以找到这个方法,用js控制可以写成:$('#xxx').treeview('collapseNode',{silent:true, ignoreChildren: false}); 这样就默认展开所有子节点了.

js控制div是否显示

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> body,ul,li{ padding:0; margin:0} li { list-style:none; } .lis { wi

JS 控制CSS样式表

JS控制CSS样式,首先得确定一点,CSS与HTML页面的链接方式,因为CSS有3种与HTML页面结合的方式,不同的方式也会产生不同的结果. 下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... 1 <style type="text/css"> 2 .orig { 3 display: none; 4 } 5 </style> 你想要改变把他的display属性由none改为inline. 解决办法:

jquery实现的点击可以展开折叠的垂直导航菜单

jquery实现的点击可以展开折叠的垂直导航菜单:本章节介绍一种比较常见的导航菜单是如何实现的,它具有垂直结构,点击导航主标题可以展开或者折叠二级菜单.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" />

JS控制伪元素的方法汇总

转载自:http://www.jb51.net/article/81984.htm 一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":before").$(dom).find(":before")或document.querySelector(":before")来获取:before伪元素. 为此,我不得不重新

jquery垂直展开折叠手风琴二级菜单

最近新开发一个简单项目,用到左侧两级的菜单.习惯性的去网上扒jquery手风琴效果,结果悲剧了好久…… 是该认认真真去学jquery,练习自己写动画效果了.从理解别人代码开始吧! 注:jquery-1.8.3.min.js需要下载文件放到同级名为js的文件夹里. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery垂直展开折叠手风琴效果</title> <s

js控制select返回原先选择的状态

找了好久,应该有比较简单的,不多说,上代码 页面: <div id="testArea"> <select class="selq" onchange="startchosee(this)" > <option value="1">选择1</option> <option value="2">选择2</option> <optio

js控制TR的显示影藏

在很多现实的场景中,有的文本框我们希望在选择“是”的按钮之后才出现,这就需要js控制TR的隐藏和显示,(div的影藏显示类似) 以下是一段选择是的按钮就显示身高和体重的文本框的代码.注意:ready方法必须要引用jquery的库. 1.html Code <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <