<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>tab</title>

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<style>

body{ margin:0; padding:0;}

ul,li{ margin:0; padding:0; list-style:none;}

.box{ width:400px; margin:0 auto;}

.box ul{ height:40px;}

.box ul li{ float:left; width:100px; color:#666; text-align:center; line-height:40px;}

.box ul li.now{ color:#F60; border-bottom:solid 2px #FF6600;}

.list{ margin-top:20px}

.list div{ color:#666;width: 200px;text-align: center;}

.list div.text{  display:none;}

</style>

</head>

<body>

<div class="box" id="box">

    <ul id="tab">

        <li>jauery</li>

        <li>html</li>

        <li>css</li>

        <li>ajax</li>

    </ul>

    <div class="list" id="list">

        <div class="text" style="display:block;">jauery</div>

        <div class="text">html</div>

        <div class="text">css</div>

        <div class="text">ajax</div>

    </div>

</div>

<script type="text/javascript">

    (function($){

        $.fn.myTab = function(options){//将对象作为参数传进去

            var defult = {parent:"",index:null};

            var setting =$.extend(defult,options);//extend方法合并两个对象，如果两个对象有相同属性，则后面的那个对象的属性覆盖前面那个对象的属性。

            $(this).find("li").on("click",function(){

                var $this=$(this);

                var $index =$this.index();

                $this.addClass("now").siblings().removeClass("now");

                $(setting.parent).children("div").eq($index).show().siblings().hide();//切换标签对应的内容

            })

            //判断进入页面显示那个标签样式和内容

            if(setting.index==null){

                $(this).find('li').eq(0).click();

            }else{

                $(this).find('li').eq(options.index).click();

            }

        }

    })(jQuery)

    $("#tab").myTab({parent:"#list",index:1})

</script>

</body>

</html>

jquery tab 插件的更多相关文章

  1. 20 个最棒的 jQuery Tab 插件

    jQuery Tab 常用来做网页上的选项设置界面和导航,本文向你推荐最棒的 20 个 jQuery Tab 插件.Enjoy !! 1. Slider Tabs SliderTabs 是一个可定制的 ...

  2. 给大家分享一个jQuery TAB插件演示

    jquery tab选项卡插件示例页面代码,使用jquery.tabs.js轻量级的tab选项卡插件来实现,并支持鼠标滑过.点击.自动切换.数据回调等功能,有的是点击切换,有的是鼠标滑过切换,自带了多 ...

  3. 开发jquery tab 插件

    开发最简单的效果- -,基本构架 html,可以换更有意义的结构,这里demo,就简单写,不考虑SEO <div id="tab-hd"> <div class= ...

  4. 用jquery编写的tab插件

    用jquery编写的tab插件 源码 $.fn.ss_tab = function (options) { var box = $(this); var btns = $(this).find(&qu ...

  5. 学会自己写jQuery插件（二）---自己写的tab插件

    通过上一个基础篇我们知道插件的格式,这次我来写一个tab插件 $(function() { $.fn.插件名称 = function(options) { var defaults = { Event ...

  6. jquery编写插件的方法

     版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...

  7. jQuery常用插件

    jQuery UI插件简介: jQuery UI是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视控件.我们可以直接用它来构建具 ...

  8. 简单的jquery tab

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery自定义插件——以 选项卡插件为例

    一直打算尝试自定义插件,终于付诸实践了,现在把内容发表出来,与大家共勉. 我是根据自己正在用的插件,模仿其源码,实现的自定义插件,完成之后,在网上看相关资料,对自定义插件部分,有了更明确的认识. jq ...

随机推荐

  1. 苹果微信input输入框被键盘遮挡

    最近一个项目,input输入框需要在页面的最下面(position:fixed),这样,当键盘获取焦点的时候, 苹果自带键盘不会挡住输入框,但是搜狗输入法的键盘就会挡住.可以用以下方法解决: docu ...

  2. xmemcached的使用

    转载 http://www.voidcn.com/blog/u010408365/article/p-4972896.html xmemcached主要特性 高性能 XMemcached同样是基于ja ...

  3. python 生成器生成杨辉三角

    用Python写趣味程序感觉屌屌的,停不下来 #生成器生成展示杨辉三角 #原理是在一个2维数组里展示杨辉三角,空的地方用0,输出时,转化为' ' def yang(line): n,leng=0,2* ...

  4. Hibernate学习笔记（一）

    2016/4/18 19:58:58 Hibernate学习笔记(一) 1.Hibernate框架的概述: 就是一个持久层的ORM框架. ORM:对象关系映射.将Java中实体对象与关系型数据库中表建 ...

  5. maven 使用tomcat插件 自动化部署war

    1.相关环境变量 idea tomcat8 maven3 2.增加tomcat user, 修改 $CATALINA_HOME/conf/tomcat-users.xml <tomcat-use ...

  6. mybatis-mysql操作存储过程

    java代码: @RequestMapping(value = "/testProcedure", method = RequestMethod.GET) public @Resp ...

  7. Spring-boot-admin功能说明

    http://blog.csdn.net/xingfulangren/article/details/52304413 **************************************** ...

  8. mysql delete 使用别名 语法

    今天删除数据,写了这么条sql语句, DELETE   from  sys_menus s WHERE s.MENU_ID in (86,87,88); 结果报错.. [Err] 1064 - You ...

  9. java: system.gc()和垃圾回收机制finalize

    System.gc()和垃圾回收机制前的收尾方法:finalize(收尾机制) 程序退出时,为每个对象调用一次finalize方法,垃圾回收前的收尾方法 System.gc() 垃圾回收方法 clas ...

  10. VB调用sendinput API

    http://files.cnblogs.com/files/liuzhaoyzz/VB%E8%B0%83%E7%94%A8sendinput_API.rar sendinput只支持发送字符或者组合 ...