没事自己弄着玩，写了个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. Delphi的内存管理及内存泄露问题  FastMM4
			
    这几天因为一个程序长时间运行出现比较严重的内存泄露问题,开始关注了一下内存管理方面的东西,以前也注意内存管理,创建了对象及时释放,但总有忘了处理的情况. 在Delphi中没有自动回收机制,所以一定要及 ...
    
			
    2. 
						
  2. SQLite打开提示database disk image is malformed
			
    SQLite打开提示database disk image is malformed 网上说产生这种错误的原因有很多种,磁盘空间不足,还有就是写入数据过程中突然掉电等. 这种情况,如果数据还可以导出, ...
    
			
    3. 
						
  3. select into from 和 insert into select 的用法和区别
			
    select into from 和 insert into select都是用来复制表,两者的主要区别为: select into from 要求目标表不存在,因为在插入时会自动创建.insert  ...
    
			
    4. 
						
  4. 查看用户的SQL执行历史
			
    程序开发少不来SQL,基本都是基于SQL开发,程序仅仅起一个流程控制的作用.但是数据库本身存在许多内置的视图或者内置的表,如果打算研究SQL执行的效率已经SQL执行的历史记录,通过这些视图可以知道.  ...
    
			
    5. 
						
  5. 稀疏矩阵乘法加法等的java实现
			
    原创声明:本文系作者原创,转载请写明出处. 一.前言       前几天由于科研需要,一直在搞矩阵的稀疏表示的乘法,不过最近虽然把程序写出来了,还是无法处理大规模的矩阵(虽然已经是稀疏了).原因可能是 ...
    
			
    6. 
						
  6. Linux神器之Strace的实践（Ubuntu上服务幽灵般的消失）
			
    不论是运维,还是开发,面对Linux系统,时常会因为配置参数或者系统的权限(iptables限制端口,selinux拦截,文件目录权限等)原因出现程序或者服务异常,无法启动等等.特别是在Linux的文 ...
    
			
    7. 
						
  7. Unity项目在亚马逊KindleFire设备上旋转不正确的解决方案
			
    前提:      在亚马逊设备上,总部要求发布的版本必须使用LandscapeLeft方向.按照经验,在UnityPlayerSettings中设置Orientation即可.   问题表现:     ...
    
			
    8. 
						
  8. Compilation failed: this version of PCRE is not compiled with PCRE_UTF8 support at offset 0
			
    在安装pcre-8.13.tar.gz时候出了错,说是缺少libpcre.so.0 下面是解决方法.真不容易哦,一个问题来没解决,新问题就出来了.一环扣一环,会搞死去.. errorgrep: err ...
    
			
    9. 
						
  9. 在.net中序列化读写xml方法
			
    收集XML的写法 XML是一种很常见的数据保存方式,我经常用它来保存一些数据,或者是一些配置参数. 使用C#,我们可以借助.net framework提供的很多API来读取或者创建修改这些XML, 然 ...
    
			
    10. 
						
  10. ionic  cordova  social media sharing plugin
			
    https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git 从上面的连接下载 插件 1.肯定是要加入 下面的那个文件的吖 从 ...
    
			
    11.