javascript控制panel的切换

可怜狼

浏览: 33041 次
来自: 北京

最近访客更多访客>>

yj10864

xjf975999

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript ASP.net ASP XHTML .net

今天下午搞了一下午，本来做好了，可是觉得两个面板的切换，还要提交到服务器去，增加了服务器的负担。就想了一种办法用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>
         




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