没事自己弄着玩，写了个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. POJ 3311 【状态压缩DP】
			
    题意: 给n个点,给出矩阵代表i到j单向边的距离. 要求,不介意访问每个点的次数,要求访问完每个点,使得路程总和最小. 思路: 由于不介意访问每个点的次数,所以可以先进行FLOYD求出任意两个点之间的 ...
    
			
    2. 
						
  2. android小细节
			
    1.资源包图片尽量控制在50k以内,否则可能读取失败 2.资源图片建议使用png格式,此格式在android系统上支持最好.对于jpeg和gif格式的图片,在android4.0以后版本,通过系统自缩 ...
    
			
    3. 
						
  3. struts2+hibernate+poi导出Excel实例
			
    本实例通过struts2+hibernate+poi实现导出数据导入到Excel的功能 用到的jar包: poi 下载地址:http://poi.apache.org/ 根据查询条件的选择显示相应数据 ...
    
			
    4. 
						
  4. Kafka单机版环境搭建
			
    使用版本:kafka_2.10-0.8.1.1 安装: -0.8.1.1.tgz -C ~/app/ 添加环境变量:.bash_profile export KAFKA_HOME=/home/spar ...
    
			
    5. 
						
  5. Unity Shader：Blur
			
    花了一晚上的时间终于看懂Image Effect中的Blur,其实很简单,就是一下子没有理解到. 原理:使用两个一维[1*7]的高斯滤波模板,一个用在x方向,另一个用在y方向.高斯滤波有模糊的效果.  ...
    
			
    6. 
						
  6. Hello world！让 grub2 引导自己的操作系统 Xos  内核
			
    按照惯例,Xos 的第一步是在屏幕上打印 Hello world!第一步是神奇的一步,如果读者对 PC 不了解,将很难得到头绪. PC 开机后,CS 和 IP 被初始化为 CS=0xFFFFh,IP= ...
    
			
    7. 
						
  7. C++: std::string 与 Unicode 结合
			
    一旦知道 TCHAR 和_T 是如何工作的,那么这个问题很简单.基本思想是 TCHAR 要么是char,要么是 wchar_t,这取决于_UNICODE 的值: // abridged from tc ...
    
			
    8. 
						
  8. sql server安装程序无法验证服务账户是什么原因
			
    为了帮助网友解决“sql server安装程序无法验证服务”相关的问题,中国学网通过互联网对“sql server安装程序无法验证服务”相关的解决方案进行了整理,用户详细问题包括:能是尚未向所有要安装 ...
    
			
    9. 
						
  9. iOS  iOS7 20px 处理
			
    - (void)viewWillAppear:(BOOL)animated { // View defaults to full size. If you want to customize the  ...
    
			
    10. 
						
  10. H264转成RGB24格式-2016.01.21
			
    #include "libavcodec/avcodec.h" #include "libswscale/swscale.h" #include "l ...
    
			
    11.