`
可怜狼
  • 浏览: 32878 次
  • 来自: 北京
社区版块
存档分类
最新评论

javascript控制panel的切换

    博客分类:
  • c#
阅读更多

           今天下午搞了一下午,本来做好了,可是觉得两个面板的切换,还要提交到服务器去,增加了服务器的负担。就想了一种办法用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
分享到:
评论
2 楼 lobbychmd 2009-03-14  
快点学个 js 框架吧。别折腾 DOM 了
1 楼 kimmking 2009-03-13  
就一个

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

代表.net和js的同胞们 投个新手帖~~

相关推荐

    javascript实现选项卡功能

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责处理用户的交互、动态内容显示以及页面的数据通信。在本教程中,我们将探讨如何使用JavaScript实现一个基本的选项卡功能,这是一种常见的用户...

    动态panel组件

    - 内容切换:在网页或应用程序中,用于实现多个内容区域的切换,如选项卡或滑动面板。 4. 实现动态Panel组件的编程环境: - Java Swing或JavaFX:在Java中,JPanel或GridPane可以作为动态面板的基础,通过add()...

    基于vue20可自由拖拽自由调整大小收缩展开的panel组件

    另外,为了保持良好的性能,可以考虑使用 Vue.js 的 `v-if` 或 `v-show` 指令控制 panel 的渲染,避免不必要的计算和 DOM 操作。 最后,这个组件可能还包括一些自定义的属性和事件,供父组件调用。例如,父组件可以...

    extjs tab panel

    在Web应用中,Tab Panel经常被用来组织和展示大量的信息,让用户能够在一个页面上轻松切换不同的内容区域。这篇博客文章可能详细讲解了如何使用ExtJS来创建和管理Tab Panel,以及其相关特性。 首先,我们要了解...

    用CSS3滑动图像面板图片切换特效多种css3图片切换演示

    结合JQuery,我们可以轻松地控制这些CSS类的切换,以实现更复杂的交互。JQuery的`fadeOut`和`fadeIn`方法可以方便地完成图片的淡入淡出,而`delay`方法可以添加延迟效果,使得图片切换更加自然。以下是一个简单的...

    extjs4.x tabpanel 动态加载panel和html例子

    在EXTJS 4.x框架中,`tabpanel`是用于创建多标签界面的组件,它可以方便地组织和切换多个视图。动态加载panel和HTML到tabpanel是提高应用性能和用户体验的有效方式,因为它允许按需加载内容,减少初始页面加载时间。...

    html切换选项卡

    根据描述,这个切换选项卡不支持IE8及以下版本,这是因为早期的IE浏览器对某些CSS3特性和JavaScript方法的支持不足。例如,使用`:hover`、`:active`伪类以及`display: none`和`element.style.display`可能在旧版IE...

    GWT中各种Panel

    GWT是一种开源的Java框架,它允许开发者使用Java编写客户端代码,然后自动编译为优化的JavaScript,使得在浏览器中运行变得高效。 1. **ComplexPanel** ComplexPanel 是所有其他面板的基类,它提供了一个容器,...

    使用JS开发的Tab Panel

    在网页设计中,Tab Panel是一种常见的用户界面组件,它允许用户通过点击不同的标签来切换显示不同的内容区域。这种设计模式可以有效地组织和展示大量信息,提高用户体验。在本主题中,我们将深入探讨如何使用...

    HTML实现Tab选项卡(自动+手动)

    这种效果通常由一组可切换的面板组成,每个面板代表一个独立的内容区域,用户...自动和手动切换功能使用户可以根据需求自由控制信息的显示,提升了网页的易用性。在实际项目中,还可以根据需求进行更多的定制和优化。

    AdvancedPanel

    1. **自定义布局**:与标准Panel相比,AdvancedPanel可能提供了更多的布局选项,比如网格布局、流式布局、瀑布流布局等,使得开发者可以更加灵活地控制子组件的位置和排列方式。 2. **事件处理**:AdvancedPanel...

    网页导航栏tab切换

    在网页导航栏的tab切换中,JavaScript可以监听用户的点击事件,根据用户的选择动态改变导航栏的样式和内容,使得导航栏不仅具有功能性,还富有视觉吸引力。 二、Tab切换原理 1. HTML结构:首先,我们需要创建HTML...

    基于js好看实用的切换选项卡

    本文将深入探讨如何使用JavaScript实现美观且实用的切换选项卡功能。 一、JavaScript概述 JavaScript,简称JS,是Web开发中不可或缺的一部分,主要负责处理客户端的动态效果和交互。它是一种轻量级的解释型编程语言...

    aspnet广告图切换效果

    为了让用户能够手动控制广告图的切换,我们可以添加左右箭头按钮,通过绑定点击事件来触发图片的前后切换。同时,为了保持用户体验,需要考虑边界条件,确保切换到最后一张图片后能返回到第一张,反之亦然。 5. **...

    简单切换面板

    总的来说,"简单切换面板"这个项目虽然代码可能较为繁琐,但它涵盖了许多JavaScript和网页交互的基础知识。通过实践,不仅可以提升编程技能,还能对前端开发有更深入的理解。对于新手来说,这是一个很好的起点,可以...

    javascript和css+div实现的选项卡效果

    在网页设计中,选项卡效果是一种常见的用户界面设计模式,它允许用户在有限的空间内查看和切换多个内容面板。在本教程中,我们将探讨如何使用JavaScript和CSS+div技术来实现这种效果。JavaScript用于处理交互逻辑,...

    3D滑动切换注册登录界面模板.zip

    他们无需从零开始编写复杂的JavaScript代码来实现3D切换效果,只需下载并集成此模板,然后根据自己的需求进行定制化修改。此外,由于模板已经过优化,其性能表现通常会优于从头编写的代码,特别是在处理大量用户交互...

    选项卡切换效果

    3. **JavaScript/jQuery 动画**:为了实现平滑的切换效果,通常会用到JavaScript或jQuery。这些脚本可以监听用户的点击事件,根据点击的选项卡标题切换显示相应的内容区域,同时更新选项卡标题的状态(例如添加选中...

    tab兼容标签切换

    三、JavaScript实现切换逻辑 1. 基于事件监听:使用JavaScript的`addEventListener`方法监听标签的点击事件,当点击某个标签时,切换内容区域的显示状态。 2. 修改DOM元素的类名:通过JavaScript修改当前活动标签和...

Global site tag (gtag.js) - Google Analytics