jq 版的tab切换
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切换的更多相关文章
- jq 折面板+tab切换(自己封装的插件哦!!)
如上图所示的一个折面板效果+tab切换:最重要的js代码如下: 对于布局简单介绍下: hot_wrap_li 这个是带箭头的横条: Arrow 这个是箭头的div:hot_wrap_li_wrap 这 ...
- jq封装的tab切换
function tab(a,b,c){ $(a).on(c,function(){ $(this).addClass('active').siblings().removeClass('active ...
- js或者jq的tab切换
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- js鼠标点击版tab切换
代码很简单,主要是布局需要用心研究下,使用时需要把css内注释去除 <!DOCTYPE html> <head> <meta http-equiv="Conte ...
- jquery实现tab切换完整代码
代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- tab切换-2016.6.4
以前的tab切换,一般都是自己找网上的源代码,不知道含义,直接套,然后会有一些不知道的问题出现. 最近学习了jq(当然属于懒人的我,学习进度很慢),然后再工作中遇到了tab选项卡,所以决定自己写一个. ...
- JavaScript学习笔记2之Tab切换
1.Tab切换简写版1 页面布局如下: <div id="tab"> <h1 id="title"> <span class=&q ...
- 【原】react做tab切换的几种方式
最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...
- tab切换的效果——仿照今日头条APP的切换效果
说点废话;不知道是哪一版本起头条的tab切换效果就变了,一直琢磨着这个事,去度娘那里也没有什么结果:正好这两天有空就尝试做了一下:用前端的技术来实现: 先看效果吧:上面的tab随着slide滑动,上面 ...
随机推荐
- Spark 累加器
由于spark是分布式的计算,所以使得每个task间不存在共享的变量,而为了实现共享变量spark实现了两种类型 - 累加器与广播变量, 对于其概念与理解可以参考:共享变量(广播变量和累加器).可能需 ...
- OpenGL变换
概述 OpenGL变换矩阵 实例:GL_MODELVIEW矩阵 实例:GL_PROJECTION矩阵 概述 OpenGL管线中,在光栅化操作之前,包括顶点位置与法线向量的几何数据经顶点操作与图元装配操 ...
- Torch 日志文件的保存 logroll
Torch 日志文件的保存 logroll 怎样将 Torch 在终端显示的信息,保存到 log 文件中 ? 现在介绍一种方法:利用 logroll 的方式. 参考 https://github ...
- WPF-编程问题和解决
1.wpf中点击button按钮后怎么让TextBlock显示button按钮的值? <TextBlock x:Name="CurProtext" Grid.Column=& ...
- js中二维数组的初始化
在编程过程中,很多情况下(涉及到坐标.层级操作)我们都会用到二维数组,下面介绍介绍几种二维数组初始化的方法: 方法一.直接定义并且初始化,这种情况适用于数量和值已知的数组: var arr=[[&qu ...
- windows开机记录查询
http://jingyan.baidu.com/article/3d69c5516b9a9ef0cf02d7f3.html
- 64位weblogic11g安装
oracle官网上下载的weblogic就是全功能版本,下面是下载 64bit weblogic 等待下载中…… 下载完成后运行 jar 文件(不会运行jar 的请自己百度) 运行时出现如下 原因是 ...
- 山东省选 郁闷的小J
小J是国家图书馆的一位图书管理员,他的工作是管理一个巨大的书架.虽然他很能吃苦耐劳,但是由于这个书架十分巨大,所以他的工作效率总是很低,以致他面临着被解雇的危险,这也正是他所郁闷的. 具体说来,书架由 ...
- 用PHP+MySQL来做分页的演示
用php做分页弄懂逻辑关系其实不难,不过我在听课的时候估计是被老师讲的那些变量里的英文单词给听懵了,因为有几个变量的名字都很像,只是换了两三个英文字母而已,有的就少几个这样的,听到一半已经不知道老师讲 ...
- Lambda演算 - 简述Y组合子的作用
Y组合子:\f.(\x.f(xx))(\x.f(xx)),接受一个函数,返回一个高阶函数 Y组合子用于生成匿名递归函数. 什么叫匿名递归函数,考虑以下C语言递归函数 int sum(int n) { ...