ta切换是在前端中非常常见的一种效果,网上的效果很多。但是我觉得下面这种方法最好,把tab效果封装成一个函数 tabs,这个函数要配合jq使用。

var tabs = function (tab, con) {
tab.click(function () {
var index = tab.index(this);
tab.removeClass('active');
$(this).addClass('active');
con.hide();
con.eq(index).show();
})
}; 下面是调用这个函数。
tabs($("#tab-li li"), $('#tab-content .main'));

函数里面的active是tab导航栏中需要变话的样式。

jq 版的tab切换的更多相关文章

  1. jq 折面板+tab切换(自己封装的插件哦!!)

    如上图所示的一个折面板效果+tab切换:最重要的js代码如下: 对于布局简单介绍下: hot_wrap_li 这个是带箭头的横条: Arrow 这个是箭头的div:hot_wrap_li_wrap 这 ...

  2. jq封装的tab切换

    function tab(a,b,c){ $(a).on(c,function(){ $(this).addClass('active').siblings().removeClass('active ...

  3. js或者jq的tab切换

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. js鼠标点击版tab切换

    代码很简单,主要是布局需要用心研究下,使用时需要把css内注释去除 <!DOCTYPE html> <head> <meta http-equiv="Conte ...

  5. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  6. tab切换-2016.6.4

    以前的tab切换,一般都是自己找网上的源代码,不知道含义,直接套,然后会有一些不知道的问题出现. 最近学习了jq(当然属于懒人的我,学习进度很慢),然后再工作中遇到了tab选项卡,所以决定自己写一个. ...

  7. JavaScript学习笔记2之Tab切换

    1.Tab切换简写版1 页面布局如下: <div id="tab"> <h1 id="title"> <span class=&q ...

  8. 【原】react做tab切换的几种方式

    最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...

  9. tab切换的效果——仿照今日头条APP的切换效果

    说点废话;不知道是哪一版本起头条的tab切换效果就变了,一直琢磨着这个事,去度娘那里也没有什么结果:正好这两天有空就尝试做了一下:用前端的技术来实现: 先看效果吧:上面的tab随着slide滑动,上面 ...

随机推荐

  1. Codeforces Round #341 Div.2 D. Rat Kwesh and Cheese

    嗯本来想着直接算出来不就行了吗 然后我想到了200^200^200....... 好吧其实也不难取两次log就行了 然后我第一次写出来log就写残了........... log里面的拆分要仔细啊.. ...

  2. maven2 com.jhlabs.imaging 01012005 maven安装jar包imaging命令

    com.jhlabs:imaging:jar:01012005 所在仓库+captcha验证码maven依赖 maven 安装jar包 到本地仓库 命令maven 3.0安装jar包 到本地仓库 co ...

  3. NFS文件系统制作

    内核:              linux-3.0 u-boot:          2010.09 开发板:         fl2440(s3c2440主芯片) 交叉编译器:   2011.11 ...

  4. requests高级用法

    会话对象 当你向同一主机发送多个请求时,session会重用底层的tcp连接,从而提升性能,同时session也会为所有请求保持 cookie. # _*_ coding: utf-8 _*_ imp ...

  5. oracle for循环查找结果

    -- Call the procedure begin ' ) loop dbms_output.put_line('v_rlt = '||v_rlt.ID||v_rlt.inspection_no) ...

  6. CocoaPods本身版本的更新

    sudo gem update --system sudo gem install cocoapods pod setup pod --version sudo gem install cocoapo ...

  7. 查看Visual Studio异常内容

    If Entity Framework throws a validation exception when saving, Visual Studio reports the message, Va ...

  8. 在ESXi 5.x 和 ESXi 6.0.x 中如何安装第三方供应商开发的驱动程序

    在 VMware ESXi 5.x 和 ESXi 6.0.x 中如何下载并安装异步驱动程序 (2076262)   Symptoms 免责声明:本文为 How to download and inst ...

  9. cordova环境配置

    1,安装node.js 2,安装git 3,安装cordova 安装node.js后,命令行输入:npm install -g cordova 加@版本号可安装指定版本,如:npm istall -g ...

  10. 64位Windows2008下插入Oracle中文乱码问题解决

    最近迁移一个.net应用系统从32位Windows2003升级到64位的Windows2008中,发现所有涉及中文的内容插入到Oracle数据库中都变为?,最开始以为是2008系统的字符集与Oracl ...