动态显示更多信息(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

查看全文

相关阅读:
797. 所有可能的路径
 1286. 字母组合迭代器
 216. 组合总和 III
77. 组合
 784. 字母大小写全排列
 90. 子集 II
78. 子集
 47. 全排列 II
46. 全排列
 40. 组合总和 II

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