网页中tab页切换小插件

最新推荐文章于 2024-03-09 15:45:51 发布

yss小虾米

最新推荐文章于 2024-03-09 15:45:51 发布

阅读量1.3k

点赞数

分类专栏： WebForm 文章标签： javascript css web开发

本文链接：https://blog.csdn.net/godloveshun/article/details/22102757

版权

WebForm 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

开发网页中有时需要实现这样的一个功能：类似于winform中的tabcontrol控件，可以来回切换，触发一个tabpage页时加载该页面，下面分享一个在网页中能实现同样效果的一个插件。优点：使用起来方面；占用内存小只有14 k；基于jquery 1.3版本上。说明：这个插件是公司小曲老师经过多次项目开发积累并自己重构的一个版本，贴上来一是方面大家使用，二在项目开发过程中，有很多业务上、页面上、模块上通用的代码，在每个项目中都可以用到，经过再次抽取封装成小的功能块，可以提高开发效率，也可以拿来学习。

如下：

1、引进tab中的四个文件；

2、如下新建几个div

< div id ="tabs">
    < ul tool ='true'>
        < li link ='#tab1'>专家基本信息 </ li>
        < li link ='#tab2'>专家资质信息 </ li>
        < li link ='#tab3'>专家聘任记录 </ li>
        < li link ='#tab4'>专家培训记录 </ li>
    </ ul>
    < div id ="tab1">
       专家基本信息
    </ div>
    < div id ="tab2">
        专家资质信息
    </ div>
    < div id ="tab3">
       专家聘任记录
    </ div>
    < div id ="tab4">
      专家培训记录
    </ div>
</ div>

3、在头部调用

 <script type="text/javascript">
        $( function () {
            $( "#tabs" ).tabs({ onClick: function (tabName) {
            }
            });
        });
    </ script>

效果图如下：

div下可以嵌套子页面。

完整html页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testForm.aspx.cs" Inherits="TestTabl.testForm" %>

<!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>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <link href="Scripts/tabs/kandytabs.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/tabs/tabs.js" type="text/javascript"></script>
    <script src="Scripts/tabs/kandytabs.pack.js" type="text/javascript"></script>
    <link href="Scripts/tabs/tabs.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <script type="text/javascript">
        $(function () {
            $("#tabs").tabs({ onClick: function (tabName) {
            }
            });
        });
    </script>
    <div id="tabs">
        <ul tool='true'>
            <li link='#tab1'>专家基本信息</li>
            <li link='#tab2'>专家资质信息</li>
            <li link='#tab3'>专家聘任记录</li>
            <li link='#tab4'>专家培训记录</li>
        </ul>
        <div id="tab1">
            专家基本信息
        </div>
        <div id="tab2">
            专家资质信息
        </div>
        <div id="tab3">
            专家聘任记录
        </div>
        <div id="tab4">
            专家培训记录
        </div>
    </div>
    </form>
</body>
</html>

Demo下载

Tab下载