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

查看全文

相关阅读:
fullCalendar改造计划之带农历节气节假日的万年历(转)
Linked List Cycle
Remove Nth Node From End of List
Binary Tree Inorder Traversal
Unique Binary Search Trees
Binary Tree Level Order Traversal
Binary Tree Level Order Traversal II
Plus One
Remove Duplicates from Sorted List
Merge Two Sorted Lists

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