Div+Css+JS做多个显示/隐藏内容块

简介: 相关样式:Code.mainbox h3{ margin-bottom:0px; line-height:32px;height:32px;padding-left:1em;background:url(http://www.
相关样式:
img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Code
.mainbox h3{ margin-bottom:0px; line-height:32px;height:32px;padding-left:1em;background:url(http://www.cnblogs.com/Images/forumbg.gif) repeat-x 0 0;font-size:13px;font-weight:700;border-bottom:1px solid #E6E7E1;border-top:4px solid #E8F0F7; border-left:1px solid #E8F0F7;border-right:1px solid #E8F0F7;}
    .mainbox
{ width:880px;position:relative; margin-left:auto; margin-right:auto; margin-bottom:5px;}
    .headactions
{position:absolute;top:12px; right:24px;line-height:1em;}
.tablelist
{ width: 880px; margin-left: auto; margin-right: auto; border:1px solid;}
     td
{background:#e5f1f4;}
HTML:
< div  class ="mainbox" >
            
< span  class ="headactions" >
                
< img  id ="category_CN_img"  src ="http://www.cnblogs.com/Images/expand.jpg"  alt ="展开/收起"  onclick ="toggle_collapse('category_CN');" />
            
</ span >
            
< h3  onclick ="toggle_collapse('category_CN');" >
            
< href ="#" > Content </ a >
            
</ h3 >
            
< div  id ="category_CN"  style =" display:none;" >
            
< table   class ="tablelist"  align ="center"  cellpadding ="0" >
                
< tr >
                    
< td >
                        Title:
                    
</ td >
                    
< td  colspan ="3" >
                        
< te:TETextBox  ID ="txtCSTitle"  runat ="server"  Width ="380px"  MaxLength ="100" ></ te:TETextBox >
                    
</ td >
                
</ tr >
                
< tr >
                    
< td >
                        Content:
                    
</ td >
                    
< td  colspan ="3" >
                        
< FCKeditorV2:FCKeditor  ID ="txtCSContent"  runat ="server"  Height ="350px"  Width ="98%" >
                        
</ FCKeditorV2:FCKeditor >
                    
</ td >
                
</ tr >
            
</ table >
            
</ div >
        
</ div >

JS:
img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Code
//显示或隐藏内容
        function toggle_collapse(objname) {
            
var obj = $("#" + objname);
            
if (obj) {
                obj.slideToggle(
"2000");
            }
            
var img = $("#" + objname + '_img');
            
if (img) {
                
if (img.attr("src"== "http://www.cnblogs.com/Images/collapse.jpg") {
                    img.attr(
"src""http://www.cnblogs.com/Images/expand.jpg");
                    img.attr(
"title""expand");

                }
                
else {
                    img.attr(
"src""http://www.cnblogs.com/Images/collapse.jpg");
                    img.attr(
"title""collapse");
                    img.attr(
"title""collapse");

                }
            }

        }
目录
相关文章
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
8天前
|
JavaScript 前端开发
页面滚动触发css3动画js插件
delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时,为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。
35 13
|
17天前
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落,生日蛋糕点亮庆祝动画特效。
33 3
|
1月前
div+css3制作的简洁404错误页面特效源码
div+css3制作的简洁404错误页面特效源码是一段实现了非常简单也大方的效果的网站404错误页面效果代码,当鼠标经过404数字时,该数字会发光发亮,本段代码适应于所有网站使用,有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。
21 1
|
1月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
136 1
|
1月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
48 3
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
115 6
|
29天前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
18 0
|
2月前
|
JavaScript 前端开发
js怎么获取div里面的文字长度
js怎么获取div里面的文字长度
71 5
|
3月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
56 0