今天下午搞了一下午,本来做好了,可是觉得两个面板的切换,还要提交到服务器去,增加了服务器的负担。就想了一种办法用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>
- 大小: 4.7 KB
分享到:
相关推荐
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责处理用户的交互、动态内容显示以及页面的数据通信。在本教程中,我们将探讨如何使用JavaScript实现一个基本的选项卡功能,这是一种常见的用户...
- 内容切换:在网页或应用程序中,用于实现多个内容区域的切换,如选项卡或滑动面板。 4. 实现动态Panel组件的编程环境: - Java Swing或JavaFX:在Java中,JPanel或GridPane可以作为动态面板的基础,通过add()...
另外,为了保持良好的性能,可以考虑使用 Vue.js 的 `v-if` 或 `v-show` 指令控制 panel 的渲染,避免不必要的计算和 DOM 操作。 最后,这个组件可能还包括一些自定义的属性和事件,供父组件调用。例如,父组件可以...
在Web应用中,Tab Panel经常被用来组织和展示大量的信息,让用户能够在一个页面上轻松切换不同的内容区域。这篇博客文章可能详细讲解了如何使用ExtJS来创建和管理Tab Panel,以及其相关特性。 首先,我们要了解...
结合JQuery,我们可以轻松地控制这些CSS类的切换,以实现更复杂的交互。JQuery的`fadeOut`和`fadeIn`方法可以方便地完成图片的淡入淡出,而`delay`方法可以添加延迟效果,使得图片切换更加自然。以下是一个简单的...
在EXTJS 4.x框架中,`tabpanel`是用于创建多标签界面的组件,它可以方便地组织和切换多个视图。动态加载panel和HTML到tabpanel是提高应用性能和用户体验的有效方式,因为它允许按需加载内容,减少初始页面加载时间。...
根据描述,这个切换选项卡不支持IE8及以下版本,这是因为早期的IE浏览器对某些CSS3特性和JavaScript方法的支持不足。例如,使用`:hover`、`:active`伪类以及`display: none`和`element.style.display`可能在旧版IE...
GWT是一种开源的Java框架,它允许开发者使用Java编写客户端代码,然后自动编译为优化的JavaScript,使得在浏览器中运行变得高效。 1. **ComplexPanel** ComplexPanel 是所有其他面板的基类,它提供了一个容器,...
在网页设计中,Tab Panel是一种常见的用户界面组件,它允许用户通过点击不同的标签来切换显示不同的内容区域。这种设计模式可以有效地组织和展示大量信息,提高用户体验。在本主题中,我们将深入探讨如何使用...
这种效果通常由一组可切换的面板组成,每个面板代表一个独立的内容区域,用户...自动和手动切换功能使用户可以根据需求自由控制信息的显示,提升了网页的易用性。在实际项目中,还可以根据需求进行更多的定制和优化。
1. **自定义布局**:与标准Panel相比,AdvancedPanel可能提供了更多的布局选项,比如网格布局、流式布局、瀑布流布局等,使得开发者可以更加灵活地控制子组件的位置和排列方式。 2. **事件处理**:AdvancedPanel...
在网页导航栏的tab切换中,JavaScript可以监听用户的点击事件,根据用户的选择动态改变导航栏的样式和内容,使得导航栏不仅具有功能性,还富有视觉吸引力。 二、Tab切换原理 1. HTML结构:首先,我们需要创建HTML...
本文将深入探讨如何使用JavaScript实现美观且实用的切换选项卡功能。 一、JavaScript概述 JavaScript,简称JS,是Web开发中不可或缺的一部分,主要负责处理客户端的动态效果和交互。它是一种轻量级的解释型编程语言...
为了让用户能够手动控制广告图的切换,我们可以添加左右箭头按钮,通过绑定点击事件来触发图片的前后切换。同时,为了保持用户体验,需要考虑边界条件,确保切换到最后一张图片后能返回到第一张,反之亦然。 5. **...
总的来说,"简单切换面板"这个项目虽然代码可能较为繁琐,但它涵盖了许多JavaScript和网页交互的基础知识。通过实践,不仅可以提升编程技能,还能对前端开发有更深入的理解。对于新手来说,这是一个很好的起点,可以...
在网页设计中,选项卡效果是一种常见的用户界面设计模式,它允许用户在有限的空间内查看和切换多个内容面板。在本教程中,我们将探讨如何使用JavaScript和CSS+div技术来实现这种效果。JavaScript用于处理交互逻辑,...
他们无需从零开始编写复杂的JavaScript代码来实现3D切换效果,只需下载并集成此模板,然后根据自己的需求进行定制化修改。此外,由于模板已经过优化,其性能表现通常会优于从头编写的代码,特别是在处理大量用户交互...
3. **JavaScript/jQuery 动画**:为了实现平滑的切换效果,通常会用到JavaScript或jQuery。这些脚本可以监听用户的点击事件,根据点击的选项卡标题切换显示相应的内容区域,同时更新选项卡标题的状态(例如添加选中...
三、JavaScript实现切换逻辑 1. 基于事件监听:使用JavaScript的`addEventListener`方法监听标签的点击事件,当点击某个标签时,切换内容区域的显示状态。 2. 修改DOM元素的类名:通过JavaScript修改当前活动标签和...