js中table（卡窗）的切换

来源：互联网发布：windows做VPN服务器编辑：程序博客网时间：2024/04/30 08:49

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="practise.WebForm1" %><!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" language="javascript"> 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"; } </script></head><body> <form id="form1" runat="server"> <div> <div> <asp:DropDownList ID="ddl_page" runat="server" onchange="change();"> <asp:ListItem Value="-1">--请选择--</asp:ListItem> <asp:ListItem Value="1">首选</asp:ListItem> <asp:ListItem Value="2">候选</asp:ListItem> </asp:DropDownList> </div> <div> <table> <tr> <td id="td_firstChoice" style="background-color: Lime; cursor: pointer;" onclick="selectOption('td_firstChoice', 'div_firstChoice');"> 招标首选 </td> <td id="td_candidate" style="background-color: Gray; cursor: pointer;" onclick="selectOption('td_candidate', 'div_candidate');"> 招标候选 </td> </tr> <tr> <td colspan="2"> <div id="div_firstChoice"> 首选 </div> <div id="div_candidate" style="display: none"> 候选 </div> </td> </tr> </table> </div> </div> </form></body></html>