js中table（卡窗）的切换

最新推荐文章于 2024-05-20 14:31:08 发布

最新推荐文章于 2024-05-20 14:31:08 发布 · 210 阅读

文章标签：

本文介绍了一个使用ASP.NET和JavaScript实现的简单页面切换功能。通过下拉菜单选择不同的选项，可以切换显示的内容区域，并且更改表格中相应选项的背景颜色。

<%@ 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>