js中table(卡窗)的切换

<textarea cols="50" rows="15" name="code" class="c-sharp">&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="practise.WebForm1" %&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head runat="server"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" language="javascript"&gt; function change() { var option = document.getElementById("ddl_page").value; switch (option) { case "1": selectOption("td_firstChoice", "div_firstChoice"); break; case "2": selectOption("td_candidate", "div_candidate"); break; default: selectOption("td_firstChoice", "div_firstChoice"); break; } } //初始化卡窗的样式 function initOption() { document.getElementById("td_firstChoice").style.backgroundColor = "gray"; document.getElementById("td_candidate").style.backgroundColor = "gray"; document.getElementById("div_firstChoice").style.display = "none"; document.getElementById("div_candidate").style.display = "none"; } //选中卡窗 function selectOption(td, div) { initOption(); document.getElementById(td).style.backgroundColor = "Lime"; document.getElementById(div).style.display = "block"; } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form id="form1" runat="server"&gt; &lt;div&gt; &lt;div&gt; &lt;asp:DropDownList ID="ddl_page" runat="server" onchange="change();"&gt; &lt;asp:ListItem Value="-1"&gt;--请选择--&lt;/asp:ListItem&gt; &lt;asp:ListItem Value="1"&gt;首选&lt;/asp:ListItem&gt; &lt;asp:ListItem Value="2"&gt;候选&lt;/asp:ListItem&gt; &lt;/asp:DropDownList&gt; &lt;/div&gt; &lt;div&gt; &lt;table&gt; &lt;tr&gt; &lt;td id="td_firstChoice" style="background-color: Lime; cursor: pointer;" onclick="selectOption('td_firstChoice', 'div_firstChoice');"&gt; 招标首选 &lt;/td&gt; &lt;td id="td_candidate" style="background-color: Gray; cursor: pointer;" onclick="selectOption('td_candidate', 'div_candidate');"&gt; 招标候选 &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2"&gt; &lt;div id="div_firstChoice"&gt; 首选 &lt;/div&gt; &lt;div id="div_candidate" style="display: none"&gt; 候选 &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </textarea>

你可能感兴趣的:(function,server,table,webform,asp,div)