該例子實現的功能為:選擇標題,內容在標題下方顯示;點選另外的標題,前一個標題內容收縮,新標題內容顯示出來.
Default.aspx
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title>無標題頁</title>
- <script type="text/javascript">
- function dis(id)
- {
- var divObj=document.getElementsByTagName("div");
- for(var i=0;i<divObj.length;i++)
- {
- if(divObj[i].getAttribute('name')=="createDiv")
- {
- divObj[i].style.display="none";
- }
- }
- document.getElementById(id).style.display="block";
- }
- </script>
- </head>
- <body>
- <form runat="server" accept="Default.aspx">
- <div id="page_box">
- <div id="content" class="mainfield">
- <div class="part_mid">
- <table border="0" cellpadding="0" cellspacing="0" class="mid_table" width="100%">
- <tr>
- <td colspan="3">
- <table width="100%" height="35px" border="0" cellspacing="0" cellpadding="0">
- <tr>
- <td class="g_part_mid_top_left">
- 測試!!!</td>
- <td class="g_part_mid_top_x">
- </td>
- <td class="g_part_mid_top_right">
- </td>
- </tr>
- </table>
- </td>
- </tr>
- <tr>
- <td colspan="3" class="part_xieli_mainfield">
- <table cellspacing="1" cellpadding="0" width="99%" border="0" class="new_message_table">
- <tr>
- <td align="left" class="part_xieli_mainfield" colspan="2">
- <br />
- <br />
- <asp:Literal ID="ltrContent" runat="server"></asp:Literal>
- </td>
- </tr>
- </table>
- </td>
- </tr>
- <tr>
- <td width="1%" class="g_part_footer_left" style="height: 15px">
- </td>
- <td width="98%" class="g_part_footer" style="height: 15px">
- </td>
- <td width="1%" class="g_part_footer_right" style="height: 15px">
- </td>
- </tr>
- </table>
- </div>
- </div>
- </div>
- </form>
- </body>
- </html>
Default.aspx.cs
- using System;
- using System.Data;
- using System.Configuration;
- using System.Web;
- using System.Web.Security;
- using System.Web.UI;
- using System.Web.UI.WebControls;
- using System.Web.UI.WebControls.WebParts;
- using System.Web.UI.HtmlControls;
- using System.Text;
- public partial class _Default : System.Web.UI.Page
- {
- protected void Page_Load(object sender, EventArgs e)
- {
- if (!IsPostBack)
- {
- BinData();
- }
- }
- #region 小幫手"顯示"/"隱藏"特效
- /// <summary>
- /// 小幫手"顯示"/"隱藏"特效
- /// </summary>
- private void BinData()
- {
- try
- {
- #region 構建HTML代碼
- StringBuilder sb = new StringBuilder();
- sb.Append("<table cellspacing='1' cellpadding='0' width='99%' border='0' class='new_message_table'>");
- for (int i = 0; i <= 5; i++)
- {
- string id = Guid.NewGuid().ToString();
- sb.Append("<tr>");
- sb.Append("<td style='font-weight: 600; height: 25px;'>");
- //執行顯示效果
- sb.AppendFormat("<a href='#' οnclick=/"dis('{0}');/">{1}</a>", id,"第i個數字");
- sb.AppendFormat("<div id='{0}' name='createDiv' style='width:100%;display:none'>{1}</div>", id, "第i個數字的內容");
- sb.Append("<br/>");
- sb.Append("</td>");
- sb.Append("</tr>");
- sb.Append("</table>");
- ltrContent.Text = sb.ToString();
- }
- #endregion
- }
- catch (Exception Err)
- {
- throw new Exception(Err.Message);
- }
- }
- #endregion
- }