<!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. Vs2012(Vs2013) 编译 64位 Qt (动态库), 并使用自编译Qt建立工程(悲催经历)。（含遗留问题）

    仅供参考. 体会:我个人此次编译不该使用Vs2013编译Qt. 使用以下程序: Qt : qt-opensource-windows-x86-msvc2012_64_opengl-5.2.1.exe ...

  2. cocos学习笔记：快速上手

    cc.Class({ //奇怪的语法风格,cc.class, extends: cc.Component, //扩展自cc.Component properties: { //类的属性设置 jumpH ...

  3. Openfire用户密码加密解密

    需求要求审核过程中都用匿名进行用户注册登录,注册用户审核通过后才使用openfire内置表 如何做到用户密码统一 Openfire是通过org.jivesoftware.util.Blowfish.j ...

  4. session,ajax 跨域cookie

    什么是Session, 什么是Cookie? Session是由应用服务器维持的一个服务器端的存储空间,用户在连接服务器时,会由服务器生成一个唯一的SessionID,用该SessionID为标识符来 ...

  5. windows php线程安全和不安全，两个版本我也看不懂，记下来再说。

    Windows下的PHP版本分两种:线程安全版本与非线程安全版本. 要论两者的区别,详细论说起来比较麻烦,从使用者的角度,记住什么时候用哪种版本的区别就可以了吧: 1.windows + IIS + ...

  6. android 实现类似qq未读消息点击循环显示

    public void jumpUnread(boolean cycle) { List<ContactLogModel> dataList = adapter.getContactLog ...

  7. 2017 New Year’s Greetings from Sun Yat-sen University

    As winter turns to spring, the world around us begins to take on an air of freshness. As  2017 is fa ...

  8. 【腾讯云的1001种玩法】腾讯云搭建DiscuzX论坛

    版权声明:本文由艾可德原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/506828001481866457 来源:腾云阁 h ...

  9. [sqoop1.99.7] sqoop实例——数据ETL

    一.创建一个mysql的link MySQL链接使用的是JDBC,必须有对应的驱动文件jar,还得有对应的访问权限,请确保能在server端访问MySQL.确保mysql的jar包已经导入到${SQO ...

  10. 项目部署到tomcat Root中后导致 WebApplicationContext 初始化两次的解决方法

    上一篇文章刚说项目部署到tomcat的ROOT中,今天就发现一个问题.通过eclipse启动tomcat时候,WebApplicationContext 初始化两次: 现象:   通过eclipse控 ...