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滑动,上面 ...
随机推荐
- linux笔记_防止ddos攻击
一.什么是DoS攻击 DoS是Denial of Service的简称,即拒绝服务,造成DoS的攻击行为被称为DoS攻击,其目的是使计算机或网络无法提供正常的服务.最常见的DoS攻击有计算机网络带宽攻 ...
- js问题
1.原型链问题 1.js中万物皆对象,但对象也分为普通对象和函数对象,Object,Function都是js自带的函数对象,凡是通过 new Function() 创建的对象都是函数对象,其他的都是普 ...
- 文件操作 模式r+与w+
r+与w+ r+是读写模式,在文件的末尾进行追加操作. >>> myfile=open('pwd.txt', ... 'r+') >>> myfile.read() ...
- 《java编程思想》读书笔记(二)第五章(2)
成员初始化 Java尽力保证:所有变量在使用前都能得到恰当的初始化. 对于方法的局部变量,Java会以编译时报错的形式贯彻这种保证,比如: void f() { int i; //这里编译时就会报错, ...
- 转-decorators.xml的用法-http://blog.csdn.net/gavinloo/article/details/7458062
今天改前人做的项目,用struts2,spring,hibernate框架做的,对了,还有jQuery.我用jquery做异步请求到后台,生成json数据返回前台生成下拉输入框,请求到后台以后,成功生 ...
- mvc路由,mvc区域
1.路由在进行匹配时,会默认匹配第一个路由信息 2.路由规则的{control}和{action}时不能改变的 3.路由规则可以中间字符可以随便定义,但是{control}和{action}必须使用一 ...
- canvas关于getImageData跨域问题解决方法
一.问题:在使用html5的canvas是,当用到getImageData方法获取图片信息时,会碰到跨域无法获取的情况,代码如下: document.getElementById("pic& ...
- inotify +rsync进行实时同步
1.安装rpm -ivh http://dl.fedoraproject.org/pub/epel/epel-release-latest-6.noarch.rpmyum -y install ino ...
- 在Angular1.X中使用CSS Modules
在Angular1.5中,增加了一个Component方法,并且定义了组件的若干生命周期hook,在代码规范中也是推崇组件化开发,但是很遗憾的是,CSS模块化组件化的问题并没有得到解决,大部分项目的打 ...
- (document).height()、$(document).scrollTop()
(document).height().$(document).scrollTop(),有需要的朋友可以参考下. jQuery(window).height()代表了当前可见区域的大小,而jQuery ...