JQ-tab-extend

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0;
 10         }
 11         #tab
 12         {
 13             width: 300px;
 14             height: 300px;
 15             margin: 50px auto;
 16             border: 1px solid red;
 17         }
 18         #tab1
 19         {
 20             width: 300px;
 21             height: 300px;
 22             margin: 50px auto;
 23             border: 1px solid red;
 24         }
 25         #con
 26         {
 27             width: 500px;
 28             height: 30px;
 29         }
 30         #con span
 31         {
 32             width: 98px;
 33             height: 30px;
 34             border: 1px solid #ccc;
 35             display: block;
 36             float: left;
 37             line-height: 30px;
 38             text-align: center;
 39         }
 40         #list
 41         {
 42             list-style: none;
 43         }
 44         #list li
 45         {
 46             width: 300px;
 47             height: 300px;
 48             line-height: 300px;
 49             text-align: center;
 50             display: none;
 51         }
 52         #con .select
 53         {
 54             background: #ddd;
 55         }
 56         #list .lis
 57         {
 58             display: block;
 59         }
 60     </style>
 61 </head>
 62 <body>
 63     <div id="tab">
 64         <div id="con">
 65             <span class=‘select‘>标题一</span>
 66             <span>标题二</span>
 67             <span>标题三</span>
 68         </div>
 69         <ul id="list">
 70             <li class="lis">内容一</li>
 71             <li>内容二</li>
 72             <li>内容三</li>
 73         </ul>
 74     </div>
 75     <div id="tab1">
 76         <div id="con">
 77             <span class=‘select‘>标题一</span>
 78             <span>标题二</span>
 79             <span>标题三</span>
 80         </div>
 81         <ul id="list">
 82             <li class="lis">内容一</li>
 83             <li>内容二</li>
 84             <li>内容三</li>
 85         </ul>
 86     </div>
 87     <script src="jquery-1.8.3.min.js"></script>
 88     <script>
 89
 90         $(function() {
 91             $.fn.extend({
 92                 Tab:function(tit,select,con,show) {
 93                     var that=$(this);//保存this,this指向实例化对象tab
 94                     $(this).find(tit).click(function() {
 95                         var i=that.find(tit).index(this);//获取当前点击span的下标
 96                         $(this).addClass(select).siblings().removeClass(select);
 97                         that.find(con).eq(i).addClass(show).siblings().removeClass(show);
 98                     })
 99                 },
100             })
101
102
103             $(‘#tab‘).Tab(‘#con span‘,‘select‘,‘#list li‘,‘lis‘);
104             $(‘#tab1‘).Tab(‘#con span‘,‘select‘,‘#list li‘,‘lis‘);
105         })
106     </script>
107 </body>
108 </html>

时间: 2024-10-13 15:59:43

JQ-tab-extend的相关文章

jq库extend的区别

jquery库包含两种扩展方法: 1.$.extend 该扩展方法主要在jquery的原型对象(prototype)上添加属性或方法,从而,造成所有jquery对象均能引用, 注意:尽量避免在原型对象上扩展方法,容易造成命名冲突,引起不可预测的结果. 2.$.fn.extend 该扩展方法主要用来扩展DOM元素的方法,通常用来制作插件. 例如:扩展form内禁用表单元素 $.fn.extend({ disable:function(){ var self=this; self.find('sel

JQ TAB ajax

!doctype html> <html> <head> <meta charset="gbk"> <title>Tab </title> <style> *{margin: 0;padding: 0;} .tab{ width: 375px; margin: 25px auto; } .tabTit li{ float: left; width: 123px; height: 38px; border: 1

jq tab

<div id="outer"> <ul id="tab"> <li class="current">tab标签</li> <li>qq在线客服代码</li> <li>css3</li> </ul> <div id="content"> <ul style="display:block;&qu

从JS的深拷贝与浅拷贝到jq的$.extend()方法

一.堆内存与栈内存 堆和栈都是内存中划分出来的用来存储的区域,栈为自动分配的内存空间,它由系统自动释放,堆为动态分配的内存,大小不定也不会自动释放. 二.js基本数据类型与引用类型的不同 基本数据类型(boolean,undefined,null,string,number) 1.基本数据类型存放在栈内存中 是存放在栈中的简单数据段,数据大小确定,内存空间大小可以分配,是直接按值存放的,所以可以直接访问. 2.基本数据类型值不可变 js中给基本类型赋值或操作基本类型数据时,并没有改变基本类型的原

jq TAB切换

<a href="http://www.w3.org/1999/xhtml">" target="_blank">http://www.w3.org/1999/xhtml"></a> <meta charset="utf-8"></meta charset="utf-8"> <title>垂直外边距合并</title> &l

老生长谈的$.extend()方法

jq的extend()是jq插件扩展很重要的部分,到这里证明是可以自己在jq的基础上,分为两种方法去扩展或开发,为jq本身添加一个方法,可以理解成扩展静态方法和自定义方法. 今天有看到一篇帖子,对这部分的理解十分独到,特意来分享一下. 首先:$.extend({}) 用这个方法给jquery本身增加一个hello的方法; <script type="text/javascript"> $(document).ready(function (){ $.extend({ hel

jQuery extend方法介绍

jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法.这个应该很好理解吧.举个例子. 1.合并多个对象. 这里使用的就是$.extend()的嵌套多个对象的功能. 所谓嵌套多个对象,有点类似于数组的合并的操作. <span style=&quo

jq-1

1--基本的5步: $有两种用法:一个是加载整个页面另一个是选择器 (js里写的)列子: $(function () { $("#btn").click(function () { alert("你是叶良辰又如何,我赵日天第一个不服!"); });}); 1.1页面加载完:$(function () {}); 另外一种写法:$(document).ready(function(){}); 1.2找到对象: $("#btn") 1.3执行你要的事件

javascript组件开发之基类继承实现

上一篇文章大概的介绍了一下关于javascript组件的开发方式,这篇文章主要详细记一下基类的编写,这个基类主要是实现继承的功能 为什么要封装基类? 由于这次重构项目需要对各种组件进行封装,并且这些组件的实现方式都差不多,为了便于管理,让代码尽量统一,所以到对组件封装一个base基类(javascript没有类的概念,暂且这样叫吧),关于javascript的oo实现:可以参考这篇文章javascript oo实现:写得很赞,膜拜,我改写的这个基于John Resig的实现方式. 基类的封装方式

jquery ui widget 源代码分析

jquery ui 的全部组件都是基于一个简单,可重用的widget. 这个widget是jquery ui的核心部分,有用它能实现一致的API.创建有状态的插件,而无需关心插件的内部转换. $.widget( name, base, prototype ) widget一共同拥有2或3个參数.base为可选. 这里之所以把base放在第二个參数里,主要是由于这样写代码更直观一些.(由于后面的prototype 是个代码很长的大对象). name:第一个參数是一个包括一个命名空间和组件名称的字符