javascript控制panel的切换

最新推荐文章于 2020-05-11 11:23:46 发布

kelianlang

最新推荐文章于 2020-05-11 11:23:46 发布

阅读量500

点赞数

分类专栏： c# 文章标签： JavaScript ASP.net ASP XHTML .net ViewUI

c# 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

kelianlang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript控制panel的切换

今天下午搞了一下午，本来做好了，可是觉得两个面板的切换，还要提交到服务器去，增加了服务器的负担。就想了一种办法用js来控制两个panel 的轮流显示。没有在项目里面加入，我只是写了一个小小的测试页面。下面给处源代码，希望对大家有帮助。只给出asp。net 的页面代买的想也的cs 没有添加代码： &lt;%@ Page Language="C#"...
复制链接

扫一扫