<!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. Oracle(DML)

    数据操作语言: insert update delete 事务控制语言: commit rollback savepoint 1.insert语句 两种格式: 直接插入 子查询插入 1. 直接插入基本 ...

  2. 关于引用JS和CSS刷新浏览器缓存问题

    有时候我们会碰到上线的新版本都要刷新一次缓存的问题.那是因为改了JS的内容,但是JSP引用的地方后面的字符串未发生改变导致浏览器读取浏览器缓存而不会重新加载新的JS内容,以下提供两种解决方式: 1.每 ...

  3. 【iOS实现一个颜色渐变的弧形进度条】

    在Github上看到一些进度条的功能,都是通过Core Graph来实现.无所谓正确与否,但是开发效率明显就差很多了,而且运行效率还是值得考究的.其实使用苹果提供的Core Animation能够非常 ...

  4. js 睡觉

    js睡觉 function sleep(numberMillis) { var now = new Date(); var exitTime = now.getTime() + numberMilli ...

  5. 1007. Maximum Subsequence Sum (25)

    Given a sequence of K integers { N1, N2, ..., NK }. A continuous subsequence is defined to be { Ni, ...

  6. 使用vs2010创建、发布、部署、调用 WebService

    原文地址:使用vs2010创建.发布.部署.调用 WebService作者:吴超 一 使用vs2010创建 WebService 1 打开VS2010,菜单    文件->新建->项目2 ...

  7. jQuery 查找父元素

    function deletesec1Div5(obj){ $(obj).closest(".sec1-div5").remove();}自己写的一段代码,实现了table中的全选 ...

  8. php访问远程服务器上的文件

    test.php <?php $fp=fopen('http://www.baidu.com', 'r'); while (!feof($fp)) { $chunk=fgets($fp); ec ...

  9. OpenCV计算点到直线的距离 数学法

    我们在检测图像的边缘图时,有时需要检测出直线目标,hough变换检测出直线后怎么能更进一步的缩小区域呢?其中,可以根据距离来再做一判断,就涉及到了点与直线的距离问题. 点到直线距离代码如下: //== ...

  10. 哈希表（Hash Table）

    参考: Hash table - Wiki Hash table_百度百科 从头到尾彻底解析Hash表算法 谈谈 Hash Table 我们身边的哈希,最常见的就是perl和python里面的字典了, ...