<!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. 微信小程序-设备

    网络状态: wx.getNetworkType(OBJECT) 获取网络类型. OBJECT参数说明: wx.getNetworkType({ success: function(res) { var ...

  2. Android Button上的文字自动变成大写，如何解决呢？

    android:textAllCaps="false"手动添加这一行,就不会有烦恼了.

  3. sql 连接查询的区别 inner,left,right,full

    --table1 表 ID NAME QQ PHONE1 秦云 10102800 135000002 在路上 10378 136000003 LEO 10000 139000004 秦云 024145 ...

  4. javascript高级编程3第二章：在html中使用javascript

    2.1 <script>元素 向html页面中插入javascript的主要方法,就是使用<script>元素.这个元素被加入到正式的html规范中.html4.01为< ...

  5. ROS学习笔记（四）——环境变量配置

    1.查看环境变量配置情况,其实并没有什么卵用 $ export | grep ROS 或者用 $ printenv | grep ROS2.配置环境变量??$ source /opt/ros/indi ...

  6. 推荐6款常用的Java开源报表制作工具

    JasperReports是一个基于Java的开源报表工具,它可以在Java环境下像其它IDE报表工具一样来制作报表.JasperReports 支持PDF.HTML.XLS.CSV和XML文件输出格 ...

  7. MySQL AHI 实现解析

    版权声明:本文由musazhang原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/904925001482373849 来源 ...

  8. No package mysql-server available.

    Centos 7 comes with MariaDB instead of MySQL. MariaDb is a open source equivalent to MySQL and can b ...

  9. 05-String动手动脑问题及课后实验性问题总结

    一.请运行以下实例代码StringPool.java,查看其输出结果.如何解释这样的输出结果?从中你能总结出什么? (1)在Java中,内容相同的字符常量("Hello")只保存一 ...

  10. LR录制Flex+Web，登录功能之登录密码出错的处理

    在LR中录制好更改密码脚本,Controller中使用少量用户进行:单用户多迭代.多用户单迭代.多用户多迭代,运行正常,于是使用490Vuser+2iteration修改980个用户的密码,部分 Vu ...