个人tab切换jq效果插件写法

在写插件之前我们需要引用一个jquery库

html代码如下:

<div class="ina_tab">
<ul><li>1</li><li>2</li><li>3</li></ul>
<div class="ina_nr">11</div>
<div class="ina_nr">22</div>
<div class="ina_nr">33</div>
</div>

css如下:

.ina_tab{ width:300px; height:200px; background:#ddd; float:left; margin:20px;}
.ina_tab ul{ width:100%; float:left; background:#aaa; list-style:none; height:30px; line-height:30px;}
.ina_tab ul li{ width:100px; float:left; text-align:center;}
.ina_tab ul li.ina_dq{ background:#f00; color:#fff;}
.ina_tab .ina_nr{ display:none; text-align:center; line-height:150px; font-size:40px; font-family:"微软雅黑"; color:#666;}

jq插件代码如下

$.fn.extend({
    //切换代码
    INA_tab:function(opt,callback){
        if(!opt){}
        var _this=$(this),ina_click=opt.click||"click",daohang=_this.find(opt.daohang||"li"),nr=_this.find(opt.nr||".ina_nr"),cur=opt.cur||"ina_dq";
        daohang.eq(0).addClass(cur);
        nr.eq(0).show();
        daohang.on(ina_click,function(){
            daohang.removeClass(cur).eq(daohang.index(this)).addClass(cur);
            nr.hide().eq(daohang.index(this)).show();
            })
        }

})

调用方法如下:

$(".ina_tab").INA_tab({

         daohang:"li",  //切换导航条,默认元素为li

         nr:".ina_nr",  //切换框,默认class为ina_nr

         click:"mouseover", //切换方式click||mouseover,默认方式为click

         cur:"ina_dq"  //切换按钮当前样式,默认为ina_dq

         })
时间: 2024-10-08 00:06:36

个人tab切换jq效果插件写法的相关文章

vue类似tab切换的效果,显示和隐藏的判断。

两者切换,动态显示对应的列表详情. 通过v-show的判断 数据驱动

新年新气象---就把昨天上班时候写的二个JQ效果展示给大家伙

先贴代码吧 <script type="text/javascript"> var msg=["你真伟大","你真漂亮","该吃饭了"]; $(document).ready(function(){ $("#tijiao").click(function(){ $("#p1").html(msg[Math.floor(Math.random() * msg.length)])

关于scrollintoview()真的是有意思极了,结合普通tab切换一起看看

scrollIntoView(alignWithTop) 是html5新特性中的一个元素,他主要是指滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素. alignWithTop是true或者是false哦.如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐. 我们见动图 见代码 scrollIntoView还可以实现类似于我们常见的tab切换的效果 一些具体的效果见动图 代码如下 使用scrollIntoView实现tab切换和直接使用jq

jquery简单的tab切换特效插件jquery-tab demo代码下载

原文:jquery简单的tab切换特效插件jquery-tab demo代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463496178688.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

Vue.js实现tab切换效果

利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思路是点击上方的标题,下方的内容随之发生改变,上方和下方用的是两个块,是兄弟节点,所以需要点击tab标题和下方内容一一对应,基予两个模块若下标相同是一个内容实现的. 1.3 tab切换第一步先要把HTML写好,这个第一步很关键,主要分为两块结构 <div id="app"> &l

javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)

类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. 先贴上完成的效果. 实现原理不复杂,在动的一条一条的称之为“窗帘条”或者是“strip”,每一个strip都是一个div,类似于雪碧图的方式将其背景图的位置设置为strip的可视位置,然后用jquery的animate让他们按照一定规律动起来就完成窗帘切换效果了. 为了使用方便,将这个功能作为jq

CSS3 :target伪类实现Tab切换效果

用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; background: #fff; } #song-info:target, #song-lyricCN:target, #song-lyricEN:target { z-index: 1; } html代码: <div class="song-nav"> <ul class="

javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)

在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调用和联动. 切换要求:当前图片显示指定时间后执行切换效果并切换下一张图片,最后一个切换后从头开始. 按照要求一个效果对象完成后要执行下一个,最后一个完成后要从头开始, 看上去就是一个带状态通知的环形列表,类似于这样的特征,可以采用职责链模式来构建. 职责链就是由不同的功能处理构成的链表,每一个功能处理作为一个

CSS3属性之 target伪类实现Tab切换效果

CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式 代码示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>target伪类实现Tab切换效果</title> <style type="text/css"> p{ bond:li; } .tablis