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. css实现分割线

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  2. HDU 5964 平行四边形

    假设直线L和L'相交于原点O.假设S ={s1,s2,...,sn}是平面上的n个点.你打 算找四个点满足如下条件:1.   A ∈ L 而 A' ∈ L'.2.   B,B'都属于S;即 B∈S 且 ...

  3. WindowsAPI开发常用资料

    主类 子类 功能 Win32API SHGetSpecialFolderLocation 获取系统特殊文件夹路径(SHGetSpecialFolderLocation) 通过 SHGetSpecial ...

  4. 1月11日,HTML学习笔记

    <ul> <li>coffee</li> <li>tea</li> <li>mile</li> </ul> ...

  5. SQL Server 连接字符串备忘

    今天把服务器上的远程访问关了,把连接字符串中的IP地址改成了.,然后就一直连不上.弄了半天,原来是本地连接时非默认实例,不能带端口号. 1.原来的连接服务器地址是:192.168.0.1SQL2005 ...

  6. 1、rhel 6.5 系统准备

    1.启动.关闭.重置服务    (rhel7 为 systemctl) [root@rhel-6 ~]# service atd status #关闭atd服务 atd 已停 [root@rhel-6 ...

  7. winform中设置窗体的默认焦点

    winform的窗体中,有时候需要设置默认焦点,有时候需要取消默认焦点. 设置默认焦点,最简单的方法就是设置这个控件的tabIndex,例:textBox1.TabIndex = 0; 也可以在窗体事 ...

  8. Android引用项目出现ClassNotFoundException

    Android中在引用其他工程,尤其是github中的相关库时,如果引用关系设置的不对,很容易出现ClassNotFoundException,例如下面的异常信息 07-26 12:47:51.549 ...

  9. webpack-vue搭建,部署到后端

    1.安装npm(安装node自带npm),npm安装成功测试 2.安装cnpm,也可以装nvm-windows 步骤1,打开user/admin/.npmrc,输入,也可以用命令 步骤2,输入npm ...

  10. TextView 获取行数,某一行的内容,某行的宽度

    获取行数 ViewTreeObserver vto = textView.getViewTreeObserver(); vto.addOnGlobalLayoutListener(new OnGlob ...