zoukankan      html  css  js  c++  java
  • JQuery

    效果:

    代码:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>显示和隐藏DIV</title>
    
    
        <script src="JavaScript/jquery-1.8.3.min.js"></script>
        <style type="text/css">
            .content {
                 400px;
                padding: 5px;
                border: 1px solid #ff6a00;
                display: none;
            }
        </style>
    
        <script type="text/javascript">
            $(document).ready(function () {
                $("#submit_id").click(function () {
                    if ($("#submit_id").text() == "展开") {
                        $("#submit_id").text("收起");
                        $("#content_id").slideDown("fast");
                    }
                    else if ($("#submit_id").text() == "收起") {
                        $("#submit_id").text("展开");
                        $("#content_id").slideUp("fast");
                    }
                    else {
                        alert("Error!");
                    }
                })
            })
        </script>
    
    
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <span><a id="submit_id" href="Javascript:void(0)">展开</a></span>
                <div id="content_id" class="content">
                    <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p>
                    <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p>
                    <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p>
                    <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p>
                    <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p>
                    <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p>
                </div>
            </div>
        </form>
    </body>
    </html>
    

      

  • 相关阅读:
    SVN项目提交报错
    Post请求报文压缩
    mysql表结构的修改-sql记录
    项目内添加quartz定时任务
    Nginx配置-通过nginx访问项目
    Mysql的使用 -简单的索引
    使用git第一次成功,记录
    Spring P命名空间 02
    Mybatis 一级、二级缓存
    延迟加载
  • 原文地址:https://www.cnblogs.com/KTblog/p/4783198.html
Copyright © 2011-2022 走看看