动态显示更多信息(toggle_visible函数的运用)

zoukankan html css js c++ java

动态显示更多信息(toggle_visible函数的运用)

      当你需要显示很多信息,可页面却再没有足够的空间可以容纳的时候,你一般会如何解决类似问题呢?或硬塞进页面而不管是否美观简洁么?还是就让用户不断拉动滚动栏而不管用户是否觉得麻烦?还是增建新页面而迫使用户去不耐烦在不同页面之间跳转呢?我想如果你使真的想作一个美观而简洁的Web网站的话,上述提到的想法应该在你脑海中一闪而过时就应该被否定的!而在同一个页面动态的显示信息的想法无疑是一个不错的主意,在此我提供两种实现类似效果的代码:

<html>
<head>
<script type='text/javascript'>
    function toggle_visible (elName) {
        var el = document.getElementById (elName);
        var isVisible = (el.style.visibility == "hidden") ? true : false;

        el.style.visibility = isVisible ? "visible" : "hidden";
        el.style.display = isVisible ? "inline" : "none";
    }
</script>
</head>
<body>
<table border=0 width="35%" cellpadding="3">
<tr>
    <td bgcolor="#404080" onclick="toggle_visible('divQOTD');">
        <font color="#FFFFFF">
        Quote of the Day
        </font>
    </td>
</tr>
<tr>
    <td bgcolor="#E0E0E0">
        <div id="divQOTD">
            <em>"Outside of a dog, a book is man's best friend.
            Inside of a dog it's too dark to read."</em>
            -- Groucho Marx<br>
        </div>
    </td>
</tr>
</table>
</body>
</html>
注意:上边代码el.style.display必须设置,不然即使你设置了el.style.visibility属性,那原先该块状元素所占有的区域并未释放,虽然它已不可见!而设置了el.style.display则可空出了需要的空间,如此才达到我们的目的! ^_^


<html>
<head>
<style>
dl{margin-top:0px;margin-bottom:0px}
ul{ margin-left:-12px;}
li{ list-style: url("arrow.gif");}
dt{ background-color: #000000;padding-left:5px;padding-top:2px;padding-bottom:2px;color:#ff9900}
</style>
<script type='text/javascript'>
    //折叠标题
    function toggleTitle(oTitle,oImage,me){
        if( oTitle.style.display == "none"){
            //oTitle.style.display="inline";
            oTitle.style.display="";
            oImage.src = "blueup.gif";
            me.title = "单击此处可以折叠显示信息";
        }else{
            oTitle.style.display = "none";
            oImage.src = "bluedrop.gif";
            me.title = "单击此处可以展开显示信息";
        }
    }
</script>
</head>
<body>
<table width="35%" bgcolor="#E0E0E0">
    <tr>
        <td>
            <dl>
                <dt onclick="toggleTitle(content_01,img_01,this);" title="单击此处可以折叠显示信息">
                  <img src="blueup.gif" id="img_01">最新书籍
                </dt>
                <dd id="content_01">
                    <ul>
                    <li>Ajax Hacks(Ajax解密)</li>
                    <li>Ajax in Action(Ajax实战)</li>
                    <li>Javascript的早餐(英文版)</li>
                    <li>Pragmatic Ajax(Ajax之道)</li>
                    </ul>
                </dd>
            </dl>
        </td>
    </tr>
</table>
</body>
</html>
代码下载(完整文件):/Files/sunwangji/js.zip

查看全文

相关阅读:
LN : leetcode 217 Contains Duplicate
LN : leetcode 53 Maximum Subarray
day23——删除数据、更改数据、索引
 day22——创建表、增加数据、查询数据
 day21——游标、mysql连接池、设计表结构
 day20——安装客户端、数据库连接、mysql事务、mysql操作数据
 day19——常用正则表达式、re正则对象和正则匹配效率比较、编译正则对象
 day20——re的matche方法和search方法、re的split,findall,finditer方法、re的matche对象
 day18——json
day17——logging、os模块、commands模块、sys模块

原文地址：https://www.cnblogs.com/sunwangji/p/492425.html