javascript的accorddion效果(一)
早年的时候的javascript积累,那个时候还很喜欢CSS和JS,呵呵,真实此一时,彼一时。
这个网站很好,虽然我已经决定用jquery了,但是这个网站也作为有时临时调用的效果资源站
http://www.dhtmlgoodies.com
demo页面
http://www.dhtmlgoodies.com/scripts/show-hide-content/show-hide-content.html
本机需求的测试静态页面sample.html如下:
<html>
<head>
<title> click slide</title>
<style type="text/css">
/* Layout properties for your question */
.question{
font-weight:bold; /* Bold font */
color: #FF8800; /* The questions is in red */
cursor:pointer; /* Cursor is like a hand when someone rolls the mouse over the question */
}
.answer{
/* Layout properties - You can change these */
border: 1px solid #555555;
padding:3px;
width:500px;
background-color:#E2EBED;
/* This one should not be changed */
display:none;
}
</style>
<script type="text/javascript">
function showHideAnswer()
{
var numericID = this.id.replace(/[^\d]/g,'');
var obj = document.getElementById('a' + numericID);
if(obj.style.display=='block'){
obj.style.display='none';
}else{
obj.style.display='block';
}
}
function initShowHideContent()
{
var divs = document.getElementsByTagName('DIV');
for(var no=0;no<divs.length;no++){
if(divs[no].className=='question'){
divs[no].onclick = showHideAnswer;
}
}
}
window.onload = initShowHideContent;
</script>
</head>
<body>
<div id="q1" class="question">领料工作台</div>
<div id="a1" class="answer">
<table>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>快捷方式一</td>
<td>快捷方式二</td>
<td>快捷方式三</td>
</tr>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>已完成一</td>
<td>已完成二</td>
<td>已完成三</td>
</tr>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>草稿一</td>
<td>草稿二</td>
<td>草稿三</td>
</tr>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>已经办理一</td>
<td>已经办理二</td>
<td>已经办理三</td>
</tr>
</table>
</div>
<div id="q2" class="question">库管员工作台</div>
<div id="a2" class="answer">
<table>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>快捷方式一</td>
<td>快捷方式二</td>
<td>快捷方式三</td>
</tr>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>已完成一</td>
<td>已完成二</td>
<td>已完成三</td>
</tr>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>草稿一</td>
<td>草稿二</td>
<td>草稿三</td>
</tr>
<tr>
<td><input type="checkbox" name="id" /></td>
<td>已经办理一</td>
<td>已经办理二</td>
<td>已经办理三</td>
</tr>
</table>
</div>
</body>
</html>
分享到:
相关推荐
javascript效果javascript效果javascript效果javascript效果
JavaScript经典效果集锦JavaScript经典效果集锦
鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示...
11个震撼的javascript网页效果11个震撼的javascript网页效果11个震撼的javascript网页效果11个震撼的javascript网页效果
33个JavaScript经典效果33个JavaScript经典效果
很适合开发人员学习的一套javascript经典效果,让你很轻松制作出漂亮的动态效果
震撼的javascript网页效果 震撼的javascript网页效果
javascript实现开门效果
txt文件,荟萃了javascript很多的效果跟应用,适用新手学习,老手参考。
27:___从两侧向中间拼合的JavaScript图片切换效果 28:___仿265网站LOGO,会盯着你看的眼睛 29:___像弹簧一样抖动的横向图片滚动 30:___前后轮翻的JS图片幻灯切换 31:___动态的Loading文字,逐个变大 32:___可控的...
javascript动画效果打开层 关闭层,由http://www.che2.com/提供
使用JavaScript增强交互效果 使用JavaScript实现表单验证 使用JavaScript制作网页广告特效 使用JavaSctipt制作弹出窗口特效 使用JavaScript实现时钟特效 使用JavaScript实现级联显示功能 使用JavaScript+CSS...
使用javaScript增强交互效果,北大青鸟的课程,好好利用。易学习!
刚刚从网上下载下来的 ,这些是网友整理的 javascript经典效果,比较像我这样的新手 ^_^
此文档收集了HTML各种效果. 大多数源码都是经过测试过的,有需要者请放心使用.
超强JavaScript效果.超强JavaScript效果.......
Javascript各种效果需求详解 Javascript各种效果需求详解 Javascript各种效果需求详解 Javascript各种效果需求详解