JQuery文本点击显示隐藏实现

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test0907.aspx.cs" Inherits="test0907" %>

<!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 runat="server">
    <title>无标题页</title>
    <script type="text/javascript" src="js/jquery1.32.min.js"></script>
<script type="text/javascript">
function show(list)
{
    if($("#"+list).css("display")=="none")
    {
        $("#"+list).show();
    }
    else
    {
        $("#"+list).hide();
    }
}
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div><a href="#" onclick="show('list')">显示</a></div>
    <div id="list" style="display:none;">
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    </ul>
    <ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    </ul>
    <ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    </ul>
    </div>
    </form>
        <script type="text/javascript">
    var temp_li="<ul><li>456</li></ul>";
        document.getElementById("list").innerHTML=temp_li+document.getElementById("list").innerHTML;
    </script>
</body>
</html>
注意:

css直接取得style中的值,none后面没有;

posted @ 2011-09-07 11:45  xgcdd  阅读(849)  评论(0编辑  收藏  举报