没事自己弄着玩，写了个tab页。不要当真。想看就看看。希望相互学习。

效果预览：

html源码：
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>tabs</title>

     <script type="text/javascript" src="jquery-1.10.1.js"></script>

     <script type="text/javascript" src="tabs.js"></script>

     <style type="text/css">

         body{

             background-color: #fff;

         }

         p{

             color:green;

             text-align: center;

             font-size: 22px;

             margin:0px;

             padding:0px;

         }

         .tabs{

             /* border: 1px solid green; */

         }

         .tab_titles{

             border: 1px solid #ccc;

             margin:1px 1px -1px 5px;

             padding: 3px;

             border-radius: 10px 10px 0px 0px;

             float: left;

             cursor: pointer;

         }

         .tab_titles_inner{

             width:100%;

             height: 100%;

             text-align: center;

         }

         .tab_selected{

             border-bottom: 1px solid white;

             margin-bottom:-1px;

             border-radius: 10px 10px 0px 0px;

         }

         .contents{

             border:1px solid #ccc;

             width:100%;

             height:800;

             margin-left: 5px;

             padding:5px;

         }

         .clear_float{

             height: 0px;

             width:0px;

             clear: both;

         }

     </style>

 </head>

 <body>

     <p>PheonixHkbxoic</p>

     <div class="tabs">

         <div>0</div>

         <div>1</div>

         <div>2</div>

     </div>

     <script type="text/javascript">

         var title = ["java","c/++","js/jquery"];

         var src = [

                     'http://www.baidu.com',

                     'http://www.360.com',

                     'http://www.csdn.net'

                 ];

         var MyTabs = tabs.init(title,src);

         MyTabs.setTabTitlesStyle("width","100px");

         MyTabs.select(1);

         // var _$$ = $$(title,src);

         // _$$.select(1);

         // _$$.setTabTitlesStyle("width","100px");

     </script>

 </body>

 </html>



js源码：




 /**

  * @FileName   :    tabs.js

  * @Author     :    PheonixHkbxoic

  * @Mail       :    hkbxoic@gmail.com

  * @DateTime   :    2016-07-03 13:18:55

  * @Version    :    v1.0.0

  * @Description:    Description

  */

 (function(w){

     var tabs = function(tab_titles,tab_content_srcs){

         return new tabs.fn._init(tab_titles,tab_content_srcs);

     }

     tabs.fn = tabs.prototype = {//对象原型，对象属性,由类(构造函数)创建的所有对象都拥有的这些属性

         tab_titles : [],

         tab_content_srcs : [],

         len : 0,

         tab_selected : 0,

         tab_selectedTitle_color: "purple",

         setTabTitles : function(titles){

             this.tab_titles = titles;

         },

         setTabContentSrcs :function(contentSrcs){

             this.tab_content_srcs = contentSrcs;

         },

         setLen :function(len){

             this.len = len|0;

         },

         _init : function(tab_titles,tab_content_srcs){

             this.setTabTitles(tab_titles);

             this.setTabContentSrcs(tab_content_srcs);

             this.setLen(tab_titles.length);

             tabs.currentSrc = tab_content_srcs[0];

             //add class to tab contents

             $(".tabs div").each(function(index, el) {

                 $(this).addClass("contents");

                 $(this).addClass("content_"+index);

             });

             //根据tab title 数组 创建tab title div

             var _title = "<div class=\"clear_float\">.</div>";

             $(".tabs").prepend(_title);

             for (var i = tab_titles.length-1; i >= 0; i--) {

                 _title = "<div id=\"tab_titles_"+i+"\" class=\"tab_titles\"><div class=\"tab_titles_inner\">"+tab_titles[i]+"</div></div>";

                 $(".tabs").prepend(_title);

             };

             //默认选中第0个

             tabs.select(0);

             //添加点击事件

             $(".tab_titles").each(function(index, el) {

                 $(this).on('click', function(event) {

                     event.preventDefault();

                     tabs.fn.tab_selected = index;

                     tabs.currentSrc = tab_content_srcs[index];

                     tabs.select(index);

                 });

             });

             return this;

         }

     };

     tabs.fn._init.prototype = tabs.fn;

     var tab_properties = {//类属性

         currentSrc : "",

         init : function(tab_titles,tab_content_srcs){

             var _tabs = new tabs(tab_titles, tab_content_srcs);

             return _tabs;

         },

         select: function(index){//设置选中第几个

             //清除之前选中

             $(".tab_titles").each(function(i, el) {

                 $(this).removeClass("tab_selected");

                 $("#tab_titles_"+i).css('color', 'green');

             });

             //选中所选

             $("#tab_titles_"+index).addClass('tab_selected');

             $("#tab_titles_"+index).css('color', tabs.fn.tab_selectedTitle_color);

             tabs.hideContents();//都隐藏

             tabs.showContents(index);//默认显示第一个

             //加载数据

             tabs.loadHtml(index,tabs.currentSrc);

         },

         setTabTitlesStyle : function(styleName,styleValue,index){

             if (typeof index == 'number'&&index>-1) {

                 $("#tab_titles_"+index).css(styleName,styleValue);

             }else{

                 $(".tab_titles").each(function(index, el) {

                     $(this).css(styleName,styleValue);

                 });

             }

         },

         hideContents : function(index){//index隐藏

             if (typeof index == 'number'&&index>-1) {

                 $(".content_"+index).hide();

             }else{

                 $(".contents").each(function(index, el) {

                     $(this).hide();

                 });

             }

         },

         showContents : function(index){//index显示

             if (typeof index == 'number'&&index>-1){

                 $(".content_"+index).show();

             }else{

                 $(".contents").each(function(index, el) {

                     $(this).show();

                 });

             }

         },

         setSelectedTitlecolor : function(color){

             tabs.fn.tab_selectedTitle_color = color;

         },

         loadHtml : function(index,url){

             $(".content_"+index).html("<iframe src=\""+url+"\" style=\"height:1000px;width:100%;border:none;\"></iframe>");

         }

     }

     tabs.extend = tabs.fn.extend = function(){

         var target = arguments[0]||{};

         for(name in target){

             this[name] = target[name];

         }

         return target;

     };

     tabs.extend(tab_properties);    //类属性赋值

     tabs.fn.extend(tab_properties);    //对象属性赋值

     w.$$ = w.tabs = tabs;

 })(window);








												


											
自制tab页的更多相关文章
	

    
								
  1. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）
		
    前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...
    
		
    2. 
						
  2. 使用CSS和jQuery实现tab页
		
    使用jquery来操作DOM是极大的方便和简单,这儿只是简单的用一个使用css和jquery来实现的tab页来简单介绍一些jQuery的一些方便使用的方法,下面是html文件: <!DOCTYP ...
    
		
    3. 
						
  3. 在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)
		
    后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...
    
		
    4. 
						
  4. jquery实现tab页切换显示div
		
    1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...
    
		
    5. 
						
  5. Android下实现tab页个人比较推崇的方法
		
    使用fragment实现tab页的效果: 三个页面是单独的三个Fragment 主Activity的实现: package com.hsx.tab; import android.os.Bundle; ...
    
		
    6. 
						
  6. 多tab页框架的使用场合
		
    多tab页框架适合应用于功能较少的场合,例如邮箱后台之类的. 对于一些业务功能多且复杂的场合就不适用.打开过多的tab页容易给用户造成混乱,页面的跳转也存在一定的难度. 一种新技术不能完全取代旧技术, ...
    
		
    7. 
						
  7. Android 常用UI控件之TabHost(5)Tab栏在底部且在最上层也不盖tab页
		
    tab栏在底部 <TabHost android:id="@android:id/tabhost" android:layout_width="match_pare ...
    
		
    8. 
						
  8. ECSHOP：首页实现显示子分类商品，并实现点击Tab页切换分类商品
		
    例子:首页实现显示子分类商品,并实现点击Tab页切换分类商品(非AJAX) 开始:    1. 打开调试开关     文件地址:include/cls_template.php 找到 : functi ...
    
		
    9. 
						
  9. 使用原生js与jQuery分别实现一个简单的tab页签
		
    tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Dynamics CRM 2011 权限管理(转)
			
    http://www.cnblogs.com/LeoTang/p/3344265.html Dynamics CRM 2011 权限管理 CRM系统基于角色的权限主要通过部门.角色.用户.团队来 进行 ...
    
			
    2. 
						
  2. Angularjs过滤器的开发.
			
    先上代码. <!DOCTYPE html> <html ng-app="FilterModule"> <head lang="en" ...
    
			
    3. 
						
  3. 蓝桥杯---剪格子(DFS&BFS)（小总结）
			
    问题描述 如下图所示,3 x 3 的格子中填写了一些整数. +--*--+--+ |10* 1|52| +--****--+ |20|30* 1| *******--+ | 1| 2| 3| +--+ ...
    
			
    4. 
						
  4. maven与git
			
    ================================================== maven的作用 ======================================== ...
    
			
    5. 
						
  5. 怎样用CODESOFT打印连续的条码标签？
			
    在实际工作中,经常会用CODESOFT条 码打印软件来实现打印连续的条码标签,将这些标签按递增或递减等方式连续打印.这样设置可大大提高用户的工作效率.实现在CODESOFT 2015打印连续条码标签, ...
    
			
    6. 
						
  6. Ubuntu上部署Ghost博客
			
    所有文章搬运自我的个人主页:sheilasun.me 刚刚成功把自己的ghost博客部署到Linode VPS上了,在这里回顾并顺便整理一下从购买域名到部署代码到服务器的整个过程. 购买域名 万网或者 ...
    
			
    7. 
						
  7. Android开发-API指南-Android简介
			
    Introduction to Android 英文原文:http://developer.android.com/intl/zh-cn/guide/index.html 采集日期:2014-4-16 ...
    
			
    8. 
						
  8. 解决setInterval计时器不准的问题
			
    在js中如果打算使用setInterval进行倒数,计时等功能,往往是不准确的,因为setInterval的回调函数并不是到时后立即执行,而是等系统计算资源空闲下来后才会执行.而下一次触发时间则是在s ...
    
			
    9. 
						
  9. JFrame 不规则窗体
			
    效果截图: 这几天静心学java,由于学的不是很好,也没有什么有什么可以作品,但是毕竟也算刚开始认真学,也遇到了好多问题: 首先 1. JFrame的无边框设置:JFrame.setUndecorat ...
    
			
    10. 
						
  10. 【测试】使用hr用户下的employees表写一条SQL语句，执行计划走索引全扫描
			
    SQL> select count(*) from employees; COUNT(*) ---------- Execution Plan ------------------------- ...
    
			
    11.