用 JQuery隐藏内容

下面的例子展示了,你如何用JQuery动态显示和隐藏一段内容。使用hide(), show()和toggle()函数。

 

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <style type="text/css">
        p#para2 {
            color: green;
            font-style: italic;
        }
        div#nav {
           background-color: #EEEEEE;
        }
    </style>
</head>
<body>
 
    <div id="nav">
        <input type="button" value="toggle()" onclick="$(para2).toggle();"/>
        <input type="button" value="hide()" onclick="$(para2).hide();" />
        <input type="button" value="show()" onclick="$(para2).show();" />
    </div>
 
    <p id="para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus odio massa, vulputate sit amet auctor at, mollis at nisi.</p>
    <p id="para2">[toggle]Fusce pretium, mauris nec euismod adipiscing, odio nibh aliquam turpis, vel dictum tortor leo eu libero. Mauris non feugiat risus.[/toggle]</p>
    <p id="para3">Etiam luctus neque nec tortor mollis dignissim. Proin interdum laoreet risus in rhoncus. Praesent vel erat ligula, a auctor nulla.</p>
 
</body>
</html>

 

源码下载:

 

Hide_show_content.rar

 

 

你可能感兴趣的:(JavaScript,jquery)