<!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. com.opensymphony.xwork2.ognl.OgnlValueStack] - target is null for setProperty(null, "emailTypeNo", [Ljava.lang.String;@6f205e]

    情况1,查询结果未转换为与前台交互的实体类DTO 实体类:EmailTypeDto package com.manage.email.dto; public class EmailTypeDto { ...

  2. Upload Files To FTP in Oracle Forms D2k

    Upload Files To FTP in Oracle Forms D2k Use following procedure to upload files to Ftp.   PROCEDURE ...

  3. 用Charles抓取https接口数据

    由于我之前抓取的某APP接口全面换上了https接口,导致我在抓取过程中遇到了很大的困境 用Charles无法获取到内容,由于现在已经搞定了,无法展示当时的错误信息,我从网站找了一个类似的错误信息 首 ...

  4. python 03

    数据结构 在 python 中有4种内建数据结构, 列表, 元组, 字典和集合. 列表 list 有序项目的数据结构, 类似数组, 是对象. 列表用中括号中用逗号分隔的项目定义.例如 ['apple' ...

  5. Map拷贝 关于对象深拷贝 浅拷贝的问题

    问题:map拷贝时发现数据会变化. 高能预警,你看到的下面的栗子是不正确的,后面有正确的一种办法,如果需要看的话的,请看到底,感谢各同学的提醒,已做更正,一定要看到最后      先看例子:     ...

  6. 当云遇见APP性能测试会怎样？

    一个测试人员应该明白,无论是在云内部或是外部,对一个应用程序而言,需要进行测试的地方都是一样的.最终用户只关注的是一个无缺陷的高性能的应用程序,而不关心应用程序位于哪里.在大多数的云服务协议里,都会提 ...

  7. 分页组件 - layui.laypage

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. forever让nodejs应用后台执行

    nodejs一般是当成一条用户命令执行的,当用户断开客户连接,运用也就停了,很烦人.如何让nodejs应用当成服务,在后台执行呢? 最简单的办法: $ nohup node app.js & ...

  9. 不在折腾----zookeeper-3.4.5

    上传zk安装包 解压 配置(先在一台节点上配置) * 添加一个zoo.cfg配置文件 $ZOOKEEPER/conf mv zoo_sample.cfg zoo.cfg * 修改配置文件(zoo.cf ...

  10. 不刷新页面获取HTML进行显示

    $.ajax({ url: "请求地址",          dataType: "text",         type: "GET"   ...