jq写tab切换
$('.index-news-sub-box ul li').click(function(){
var i=$(this).index();
var img=$('.index-news-img-box a img');
img.removeClass('z-index-2');
img.eq(i).addClass('z-index-2').siblings().removeClass('z-index-2');
});
原理:给某个按钮绑定点击事件;被点击的当前元素显示(可以设置display:block;也可以设置z-index:1;),其他的兄弟元素隐藏(可以设置display:none;也可以设置z-index:0;).
前提:按钮个数和被切换的内容区的个数相等,且按钮要有想同的标识(class,id,或标签),内容区同理。
jq写tab切换的更多相关文章
- js或者jq的tab切换
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 微信小程序写tab切换
微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view ...
- 教你两招用纯CSS写Tab切换
说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: Tab切换 方法一:模 ...
- jquery写tab切换,三行代码搞定
<script type="text/javascript"> $("button").on("click",function( ...
- 关于scrollintoview()真的是有意思极了,结合普通tab切换一起看看
scrollIntoView(alignWithTop) 是html5新特性中的一个元素,他主要是指滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素. alignWithTop是true ...
- jquery写的tab切换效果 非常简单
自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12p ...
- 一款jquery写出来的tab切换
当时做这个的时候,当前状态是不规则的,li对应的有3块内容,分别设定不同背景图片,只显示当前的一个背景,鼠标移上去的时候其余2个用background-position: -1000px 0px;来隐 ...
- jq 折面板+tab切换(自己封装的插件哦!!)
如上图所示的一个折面板效果+tab切换:最重要的js代码如下: 对于布局简单介绍下: hot_wrap_li 这个是带箭头的横条: Arrow 这个是箭头的div:hot_wrap_li_wrap 这 ...
- tab切换-2016.6.4
以前的tab切换,一般都是自己找网上的源代码,不知道含义,直接套,然后会有一些不知道的问题出现. 最近学习了jq(当然属于懒人的我,学习进度很慢),然后再工作中遇到了tab选项卡,所以决定自己写一个. ...
随机推荐
- CF596D Wilbur and Trees
题意:有一些高度为h的树在数轴上.每次选择剩下的树中最左边或是最右边的树推倒(各50%概率),往左倒有p的概率,往右倒1-p. 一棵树倒了,如果挨到的另一棵树与该数的距离严格小于h,那么它也会往同方向 ...
- CSS所有选择器
.class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素 1 * * ...
- Python 变量与数据类型
1.变量命名规则: 变量名只能是字母,数字和下划线的任意组合 变量名第一个字符不能是数字 变量名区分大小写,大小写字母被认为是两个不同的字符 特殊关键字不能命名为变量名 2.数值的运算 print ( ...
- csp-s模拟测试61砖块, 数字,甜圈题解
题面:https://www.cnblogs.com/Juve/articles/11626350.html 砖块: 直接模拟即可,map统计被覆盖的次数 #include<iostream&g ...
- 「题解」NOIP模拟测试题解乱写II(36)
毕竟考得太频繁了于是不可能每次考试都写题解.(我解释个什么劲啊又没有人看) 甚至有的题目都没有改掉.跑过来写题解一方面是总结,另一方面也是放松了. NOIP模拟测试36 T1字符 这题我完全懵逼了.就 ...
- 线性dp——cf1032
升维来保存第i位按j是否可行,然后枚举i-1个的状态,用5*5n就可以完成递推 /* dp[i][j]==0表示第i步按j不可行 */ #include<bits/stdc++.h> us ...
- 自己整理的一个访问SQLite3数据库的C++类
原文地址:自己整理的一个访问SQLite3数据库的C++类作者:vigra 近日,对SQLite3的使用进行了研究.真不愧是优秀的嵌入数据库,API接口也极其简捷.基本上只要使用以下几个接口就能完成数 ...
- intrinsicContentSize和Content Hugging Priority
Mgen | 首页 | | 发新文章 | 联系 | 订阅 | 管理 iOS: 在代码中使用Autolayout (2) - intrinsicContentSize和Content Hugging ...
- Bean容器的初始化
Bean容器的初始化
- 使用Parallel.Invoke并行你的代码
优势和劣势 使用Parallel.Invoke的优势就是使用它执行很多的方法很简单,而不用担心任务或者线程的问题.然而,它并不是适合所有的场景.Parallel.Invoke有很多的劣势 如果你使用它 ...