论坛首页 → 编程语言技术论坛 →

javascript控制panel的切换

浏览 5789 次
锁定老帖子 主题：javascript控制panel的切换
精华帖 (0) :: 良好帖 (0) :: 新手帖 (4) :: 隐藏帖 (0)
作者 正文
  • 可怜狼
  • 等级: 初级会员
  • 文章: 40
  • 积分: 60
  • 来自: 北京
   发表时间：2009-03-13  

           今天下午搞了一下午，本来做好了，可是觉得两个面板的切换，还要提交到服务器去，增加了服务器的负担。就想了一种办法用js来控制两个panel 的轮流显示。

       没有在项目里面加入，我只是写了一个小小的测试页面。下面给处源代码，希望对大家有帮助。

   只给出asp。net 的页面代买的  想也的cs 没有添加代码：

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="panel._Default" %>

<!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>Untitled Page</title>
    <script language="javascript" type="text/javascript">

       function   SelectType()
{
//var   pname=document.getElementById( "pname");
//var   pdate=document.getElementById( "pdate");
var   pname=document.getElementById( "pname");
var   pdate=document.getElementById( "pdate");
var   list=document.getElementById( "selectItem");


var   v=list.options[list.selectedIndex].text;

if(v== "name")
{
     alert( "pname");
     pdate.style.display= "none";
     pname.style.display= "block";
}
if(v== "date")
{
     alert( "pdate");
   
     pname.style.display= "none";
     pdate.style.display= "block";
}
}


function $(id) {
 return document.getElementById(id);
}
function dis(id,isclose)
{
    if (isclose)
     $(id).style.display = "block";
 else
     $(id).style.display = "none";
}
   
    </script>
</head>
<body>
    <form id="form1" runat="server">
   
        <asp:Panel ID="pname"   runat="server" Height="50px" Width="125px">
        panel1
        </asp:Panel>
      
      
   
        <asp:Panel ID="pdate" runat="server" Height="50px" Width="125px">
        panel2
        </asp:Panel>
        &nbsp;
       
       
       
       
        <select id="selectItem" name="selectItem"   onchange=" SelectType() ">
            <option value="name"  >name</option>
            <option value="date" >date</option>
           
        </select>
    </form>
   
    <%=testStr %>
    <script language="javascript" type="text/javascript">
    dis('pname',true);
    dis('pdate',false);
    </script>
</body>
</html>

  

 

  • 大小: 4.7 KB
返回顶楼
         
  • kimmking
  • 等级: 三钻会员
  • 性别:
  • 文章: 3531
  • 积分: 1500
  • 来自: 中华大丈夫学院
   发表时间：2009-03-13  
就一个

pdate.style.display= "none";
pname.style.display= "block";

代表.net和js的同胞们 投个新手帖~~
返回顶楼
          回帖地址
0 请登录后投票
  • lobbychmd
  • 等级: 初级会员
  • 性别:
  • 文章: 280
  • 积分: 40
  • 来自: 广州
   发表时间：2009-03-14  
快点学个 js 框架吧。别折腾 DOM 了
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → 编程语言技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics