网页中tab页切换小插件

    开发网页中有时需要实现这样的一个功能:类似于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下载
  
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页