利用AJAX的TabContainer與TabPanel結合Javascript來製作類似Yahoo的首頁新聞頁籤的效果

最新推荐文章于 2024-07-25 15:46:04 发布
最新推荐文章于 2024-07-25 15:46:04 发布
阅读量2.4k 收藏 2
点赞数
文章标签： javascript yahoo ajax server border table 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tab.aspx.cs" Inherits="Tab" %>



<!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>未命名頁面</title>

</head>

<script language="javascript">

function changeTab( tabIndex )

{      

    var tabBehavior = $get('<%=TabContainer1.ClientID%>').control; 

    tabBehavior.set_activeTabIndex(tabIndex);

}

</script>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

        <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0"

            Style="text-align: left" Width="460px">

            <ajaxToolkit:TabPanel ID="TabPanel1" runat="server">

                <HeaderTemplate>                   

                    <table border="0" cellpadding="0" cellspacing="0" style="width: 100px">

                        <tr>

                            <td>

                                <span id="TabHeader1" οnmοuseοver="changeTab(0)">焦點新聞</span>

                            </td>

                        </tr>

                    </table>

                </HeaderTemplate>

                <ContentTemplate>

                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

                        <ContentTemplate>

                            <table border="0" cellpadding="0" cellspacing="0" style="width: 440px">

                                <tr>

                                    <td>

                                        焦點新聞1<br />

                                        焦點新聞2</td>

                                </tr>

                            </table>

                        </ContentTemplate>

                    </asp:UpdatePanel>

                </ContentTemplate>

            </ajaxToolkit:TabPanel>

            <ajaxToolkit:TabPanel ID="TabPanel2" runat="server">

                <HeaderTemplate>

                    <table border="0" cellpadding="0" cellspacing="0" style="width: 100px">

                        <tr>

                            <td>

                                <span id="TabHeader2" οnmοuseοver="changeTab(1)">運動</span>

                            </td>

                        </tr>

                    </table>

                </HeaderTemplate>

                <ContentTemplate>

                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">

                        <ContentTemplate>

                            <table border="0" cellpadding="0" cellspacing="0" style="width: 440px">

                                <tr>

                                    <td>

                                        運動1<br />

                                        運動2</td>

                                </tr>

                            </table>

                        </ContentTemplate>

                    </asp:UpdatePanel>

                </ContentTemplate>

            </ajaxToolkit:TabPanel>

            <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">

                <HeaderTemplate>

                    <table border="0" cellpadding="0" cellspacing="0" style="width: 100px">

                        <tr>

                            <td>

                                <span id="Span3" οnmοuseοver="changeTab(2)">影視</span>

                            </td>

                        </tr>

                    </table>                   

                </HeaderTemplate>

                <ContentTemplate><asp:UpdatePanel ID="UpdatePanel3" runat="server">

                    <ContentTemplate>

                        <table border="0" cellpadding="0" cellspacing="0" style="width: 440px">

                            <tr>

                                <td>

                                    影視1<br />

                                    影視2</td>

                            </tr>

                        </table>

                    </ContentTemplate>

                </asp:UpdatePanel>

                </ContentTemplate>

            </ajaxToolkit:TabPanel>

            <ajaxToolkit:TabPanel ID="TabPanel4" runat="server" HeaderText="TabPanel4">

                <HeaderTemplate>

                    <table border="0" cellpadding="0" cellspacing="0" style="width: 100px">

                        <tr>

                            <td>

                                <span id="Span2" οnmοuseοver="changeTab(3)">國際</span>   

                            </td>

                        </tr>

                    </table>

                   

                </HeaderTemplate>

                <ContentTemplate><asp:UpdatePanel ID="UpdatePanel4" runat="server">

                    <ContentTemplate>

                        <table border="0" cellpadding="0" cellspacing="0" style="width: 440px">

                            <tr>

                                <td>

                                    國際1<br />

                                    國際2</td>

                            </tr>

                        </table>

                    </ContentTemplate>

                </asp:UpdatePanel>

                </ContentTemplate>

            </ajaxToolkit:TabPanel>

        </ajaxToolkit:TabContainer>

    </div>

    </form>

</body>

</html>
denuvead
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
asp.net多页签页面切换
05-06
首先，ASP.NET提供了多种方式来实现多页签效果，如使用`TabControl`控件（通常是来自第三方库，如DevExpress或Telerik）或者自定义HTML/CSS结合JavaScript的解决方案。这里我们将重点讨论使用内置控件和前端技术相...
Ajax TabContainer 自定义CSS样式 .txt
06-12
Ajax TabContainer 自定义CSS样式 .txtAjax TabContainer 自定义CSS样式 .txtAjax TabContainer 自定义CSS样式 .txt
Ajax + JQuery 实现无刷新效果
05-22
Ajax（异步JavaScript和XML）技术是实现这一目标的关键工具之一，而jQuery库则通过简化JavaScript的复杂性，让开发者更容易地利用Ajax功能。本篇文章将深入探讨如何结合Ajax和jQuery来实现无刷新效果。 首先，Ajax...
AjaxControlToolkit之TabContainer(自定义样式)
06-02
7. **应用动画效果**：如果需要，你还可以通过CSS3过渡和动画来增强TabContainer的切换效果，如平滑的颜色变化或透明度调整。 8. **调试与调整**：在浏览器中预览页面，检查TabContainer是否按预期显示。如有必要，...
jquery实现的ajax选项卡tab特效插件代码
06-10
在JavaScript库中，jQuery是广泛使用的工具之一，它提供了丰富的功能来简化DOM操作、事件处理以及动画效果。本知识点将详细探讨如何使用jQuery实现一个基于Ajax的选项卡（Tab）特效插件。 首先，我们需要理解jQuery...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 462
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
Next.js静态导出与动态路由优化
天涯学馆
07-20 1069
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1174
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
lph159的博客
07-24 1025
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 293
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
VUE中的重点*
qq_61132537的博客
07-22 977
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 545
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
thinkphp8结合layui2.9 图片上传验证
quweiie的专栏
07-21 371
thinkphp8图片上传的验证
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 541
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
el-menu根据多层树形结构递归遍历展示菜单栏
m0_62317155的博客
07-23 867
el-menu根据多层树形结构递归遍历展示菜单栏
爬虫基本原理入门
最新发布
RHeng的博客
07-25 692
爬虫（Web Crawler），又称为网络爬虫或网页蜘蛛，是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。它们可以模拟浏览器行为，遍历网页并抓取网页中的信息，如文本、图片、链接等。接下来，我们会尝试使用Python等编程语言，结合相关库和工具，动手编写自己的爬虫程序，探索更多关于爬虫技术的奥秘。
typescript中type和interface有什么区别，如何选择？
闻人放歌的三寸青草园圃
07-23 151
【代码】typescript中type和interface有什么区别，如何选择？
牛客JS题（二）直角三角形
不起眼小菜菜的博客
07-25 173
注释很详细，直接上代码……
如何关闭页面报错的遮罩层
karlaofsky的博客
07-25 129
在vue.config.js中添加如下配置，问题：如何关闭页面报错的遮罩层。
jsp用dojo生成多页签的列表数据界面
04-25
关于你的问题，可以使用Dojo框架中的TabContainer和ContentPane组件来生成多页签列表数据界面。首先需要引入Dojo库和相关代码，然后创建一个TabContainer容器，为其每个tab添加一个ContentPane作为内容，最后将数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值