专栏首页米扑专栏VS2008(C#)制作网页Tab标签切换方法(二)

VS2008(C#)制作网页Tab标签切换方法(二)

VS2008(C#)制作网页Tab标签切换方法(二)——JavaScript实现

使用JavaScript脚本代码,实现Tab标签切换

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tab_JScript.aspx.cs" Inherits="TabContent" %>

<!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>Tab的JavaScript实现</title>     <style type="text/css">         body         {             color: #000000;             background-color: #ffffff;             font-family: Tahoma, 宋体;             font-size: 12px;             margin: 0px;             padding: 0px;             text-align: center;         }         .sec1         {             background-color: #99ffcc;         }         .sec2         {             background-color: #ffcc33;         }     </style> </head> <body>     <form id="form1" runat="server">     <%--     遨游、IE8、360浏览器都兼容     但是,FireFox、Chrome、Opera浏览器不支持     --%>     <center style="margin-top: 20px;">         <table id="secTable" border="1" cellspacing="2" cellpadding="10" valign="middle"             width="500px">             <tr>                 <td class="sec2" onclick="secBoard(0)">                     文学                 </td>                 <td class="sec1" onclick="secBoard(1)">                     历史                 </td>                 <td class="sec1" onclick="secBoard(2)">                     科技                 </td>                 <td class="sec1" onclick="secBoard(3)">                     军事                 </td>             </tr>         </table>         <table id="mainTable" class="main_tab" border="1" cellspacing="0" cellpadding="0"             width="500px" style="height: 600px;">             <tbody style="display: block;">                 <tr>                     <td>                         111-文学                     </td>                 </tr>             </tbody>             <tbody style="display: none;">                 <tr>                     <td>                         222-历史                     </td>                 </tr>             </tbody>             <tbody style="display: none;">                 <tr>                     <td>                         333-科技                     </td>                 </tr>             </tbody>             <tbody style="display: none;">                 <tr>                     <td>                         444-军事                     </td>                 </tr>             </tbody>         </table>

        <script type="text/javascript">             function secBoard(n) {                 for (i = 0; i < secTable.cells.length; i++)                     secTable.cells[i].className = "sec1";                 secTable.cells[n].className = "sec2";                 for (i = 0; i < mainTable.tBodies.length; i++)                     mainTable.tBodies[i].style.display = "none";                 mainTable.tBodies[n].style.display = "block";             }         </script>     </center>     </form> </body> </html>

具体代码如上,源代码下载: VS2008(C#)4种方法实现Tab标签灵活切换源码,测试成功!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • iOS React Native 混合开发集成React Native

       有时候我们并不是需要全部使用React Native,我们想和原生混合开发,那我们应该怎么办呢。

    ZY_FlyWay
  • 150行JavaScript代码实现增强现实

    增强现实技术(Augmented Reality,简称 AR),是一种实时地计算摄影机影像的位置及角度并加上相应图像、视频、3D模型的技术,这种技术的目标是在屏...

    Jerry Wang
  • jq和zepto

    星辉
  • 高级Js-面向对象编程

    星辉
  • 前端项目知识点总结

    星辉
  • js实现自定义滚动条

    星辉
  • 高级Js-Tab切换组件

    星辉
  • js实现简易拖拽

    scrollWidth:对象的实际内容的宽度,不包括边线宽度 clientWidth:对象内容的可视区的宽度,不包括边线宽度 offsetWidth:对...

    星辉
  • js实现磁性吸附

    星辉
  • js正则表达式

    用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false

    星辉

扫码关注云+社区

领取腾讯云代金券