没事自己弄着玩，写了个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. jsp标准标签库
			
    抄袭自:http://www.cnblogs.com/hongten/archive/2011/05/14/2046005.html JSP标准标签库     Pass by xkk ,and aut ...
    
			
    2. 
						
  2. SQL 获取各表记录数的最快方法
			
    select distinct o.name,i.rows from sysobjects o,sysindexes  i where o.id=i.id and o.Xtype= 'U' and i ...
    
			
    3. 
						
  3. Js字符串与十六进制的相互转换
			
    开发过程中,字符串与十六进.二进制之间的相互转换常常会用到,尤其是涉及到中文的加密时,就需要把中文转换为十六进制.下面说说具体的转换方法. 1.字符串转换为十六进制 主要使用 charCodeAt() ...
    
			
    4. 
						
  4. c# .NET 进行数据库备份和还原
			
    本文主要内容来源stswordman的介绍,开发环境为10,数据库为08R2 原文地址http://www.cnblogs.com/stswordman/archive/2006/08/06/4690 ...
    
			
    5. 
						
  5. jdk的反射机制
			
    反射的作用 1)在运行时判断任意一个对象所属的类: 2)在运行时构造任意一个类的对象: 3)在运行时判断任意一个类所具有的成员变量和方法: 4)在运行时调用任意一个对象的方法. 5)反射API可以获取 ...
    
			
    6. 
						
  6. 【翻译】使用CSS3和jQuery制作跟随鼠标方位的Hover特效
			
    今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果.当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑 ...
    
			
    7. 
						
  7. Oozie 中各种类型的作业执行结果记录
			
    一,提交的作业被SUSPEND,然后再被KILL,记录如下: TYPE1: appType WORKFLOW_JOB id 0000002-160516095026479-oozie-oozi-W e ...
    
			
    8. 
						
  8. Centos7 Openstack - (第一节)基本环境配置
			
    Centos7 install Openstack - (第一节)基本环境配置 我的blog地址:http://www.cnblogs.com/caoguo 根据openstack官方文档配置 官方文 ...
    
			
    9. 
						
  9. 洛谷P1214 [USACO1.4]等差数列 Arithmetic Progressions
			
    P1214 [USACO1.4]等差数列 Arithmetic Progressions• o 156通过o 463提交• 题目提供者该用户不存在• 标签USACO• 难度普及+/提高 提交 讨论 题 ...
    
			
    10. 
						
  10. 在ASPxGridView的主从表显示中，有什么属性可以只让其每次选择只展开一列？
			
    在ASPxGridView的主从表显示中,有什么属性可以只让其每次选择只展开一列?(效果图如下:): 在ASPxGridView的主从表显示中,有什么属性可以只让其每次选择只展开一列(效果图) 实现该 ...
    
			
    11.