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

相关样式:

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');">
            <a 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:

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");

                }
            }

        }

时间: 2024-09-20 06:15:39

Div+Css+JS做多个显示/隐藏内容块的相关文章

可刷新的Div+CSS+JS树型菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

可刷新的Div+CSS+JS制作的树型菜单

css|js|菜单|刷新 Div+CSS+JS组和能够实现很多好看的特殊的效果,这里推荐一款可刷新的下拉菜单源代码: <style type="text/css"><!--*{margin:0;padding:0;border:0;}body { font-family: arial, 宋体, serif; font-size:12px;}#nav { width:180px; line-height: 24px; list-style-type: none; tex

Div+CSS+JS树型菜单,可刷新

css|js|菜单|刷新 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&

DIV+CSS+JS不间断横向滚动实现代码_javascript技巧

DIV+CSS+JS实现不间断横向滚动代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>横向不间断滚动DIV CSS代码-DIVCSS5</title> </head> <body>

jQuery入门(5) 显示/隐藏内容

jQuery的hide()和show()可以用来显示和隐藏内容.比如下面的例子:jQuery的hide()和show()可 以用来显示和隐藏内容.比如下面的例子: <!doctype html> <html> <head> <meta charset="utf-8"> <title>JQuery Demo</title> <script src="scripts/jquery-1.9.1.js&qu

DIV+CSS布局中无法显示背景颜色是怎么回事

div css新手布局会遇到布局的背景颜色无法显示,一般布局背景无法显示通常原因如下: 1.由使用float浮动造成浮动产生无法显示css背景颜色 2.高度不够而产生背景无法显示 接下来我们分别介绍无法显示背景颜色或图片的原因和解决方法. 一.css float浮动产生浮动无法显示背景样式颜色 假设对一个对象设置了background背景颜色样式,该对象内部盒子有使用float浮动属性样式,这个时候该对象浮动产生,导致该对象不能撑开,所以css背景颜色就不能无法显示,解决方法有三种,一个是设置c

div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox_javascript技巧

div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox 用marquee实现首尾相连循环滚动效果(仅IE): 复制代码 代码如下: <marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount=&quo

DIV+CSS网页在浏览器显示空白但是源代码完整的解决办法

特别在微软IE6版本上打开div+css开发的网页,浏览器不显示空白,什么也不显示,但是查看源代码结果网页代码又完整.你在开发测试网页时候有遇到此问题吧! 常见网页显示空白,网页源文件完整原因如下: 1.主要原因是html和css源代码的编码不同造成 2.没有设置网页编码charset 3.charset编码设置声明标签放置的位置不正确 解决div+css开发的网页在IE6浏览器不显示的方法介绍 1.要求标签里的charset=UTF-8"与CSS编码一致,在CSS放置编码方法为在CSS文件最顶

div+css+js下拉菜单

 代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu