没事自己弄着玩，写了个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. [Flex] as3xls读取excel，修改保存单表(一)
			
    经过大神修改过的as3xls支持中文,并可以修改保存单一sheet,保存后原有的excel样式均会消失,目前仅能如此. <?xml version="1.0" encodin ...
    
			
    2. 
						
  2. char 汉字
			
    Unicode/UCS总结: UCS和Unicode使用最大32bit来表示字符(它的范围很大,但不一定全使用,常使的是UCS-2),它用2~4个字节的空间描述了已知的接近全部的字符(并且仍在更新,还 ...
    
			
    3. 
						
  3. 【cl】sikuli启动不了
			
    公司电脑:win7+64位 问题:点击sikuli_ide没有反应 卸载了,启动电脑,重新安装.
    
			
    4. 
						
  4. 我自己做的网站终于上线啦，用tornado做的，求围观 www.yustock.live
			
    跟股票相关的一个小网站~ www.yustock.live
    
			
    5. 
						
  5. [HDU 2602]Bone Collector ( 0-1背包水题 )
			
    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2602 水题啊水题 还给我WA了好多次 因为我在j<w[i]的时候状态没有下传.. #includ ...
    
			
    6. 
						
  6. 修复："Failed to start Load Kernel Modules"
			
    使用非默认内核而出现的错误. [zsj@arch ~]$ systemctl --state=failed UNIT LOAD ACTIVE SUB DESCRIPTION● systemd-modu ...
    
			
    7. 
						
  7. 向Page对象注册脚本
			
    在madn上ClientScriptManager 类的示例: <%@ Page Language="C#"%> <!DOCTYPE html PUBLIC &q ...
    
			
    8. 
						
  8. 用js控制选项卡的隐藏与显示
			
    通过使用ul和div来,借助于jquery来实现选项卡的显示与隐藏 <form action="" method="post"> <div&g ...
    
			
    9. 
						
  9. Battery-historian 参数说明
			
    部分参数说明 battery_level 电量,可以看出电量的变化.比如上图中的数据显示刚开始电量是100%,然后在第11秒-12秒中间的某个时刻降到了99%. plugged 充电状态,这一栏显示是 ...
    
			
    10. 
						
  10. Android开发-API指南-Android简介
			
    Introduction to Android 英文原文:http://developer.android.com/intl/zh-cn/guide/index.html 采集日期:2014-4-16 ...
    
			
    11.