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选项卡,所以决定自己写一个. ...
随机推荐
- Atcoder arc085
C:HSI 期望模型,不想说. #include<cstdio> using namespace std; typedef long long ll; int main() { int n ...
- 图论最短路径算法——Dijkstra
说实在的,这算法很简单,很简单,很简单--因为它是贪心的,而且码量也小,常数比起SPFA也小. 主要思想 先初始化,dis[起点]=0,其它皆为无限大. 还要有一个bz数组,bz[i]表示i是否确定为 ...
- vertx使用过程中浏览器端Cookie重复问题
[问题描述] 背景: 使用vertx提供的服务,使用Dispatcher做路由转发,内部通过routingcontext做请求传递及响应. 现象: 在谷歌浏览器的Network中,看到Cookie中有 ...
- field方法属于模型的连贯操作方法之一
field方法属于模型的连贯操作方法之一,主要目的是标识要返回或者操作的字段,可以用于查询和写入操作. 1.用于查询 指定字段 在查询操作中field方法是使用最频繁的. $Model->fie ...
- LUOGU P2580 于是他错误的点名开始了(trie树)
传送门 解题思路 trie树模板
- egret 篇——关于ios环境下微信浏览器的音频自动播放问题
前段时间公司突然想用egret(白鹭引擎)做一个金币游戏,大半个月边看文档边写吭哧吭哧也总算是弄完了.期间遇到一个问题,那就是ios环境下微信浏览器的音频自动播放问题. 个人感觉吧,egret自己封装 ...
- vue基础知识总结
vue不支持安卓6.0以下版本,切记!!! 1.创建vue实例 var vm = new Vue({ el: '#app', //所指向的dom的id data:{ }, //与dom元素绑定的数据 ...
- 深入浅出 Java Concurrency (39): 并发总结 part 3 常见的并发陷阱
常见的并发陷阱 volatile volatile只能强调数据的可见性,并不能保证原子操作和线程安全,因此volatile不是万能的.参考指令重排序 volatile最常见于下面两种场景. a. 循环 ...
- 10-2-点击生成10个div
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Linux设置复制粘帖的快捷方式
一.快捷设置 安装gpm:yum install -y gpm* 开启gpm服务:systemctl start gpm 按住鼠标左键,选中想要复制的内容,松开就完成复制,再在复制的位置按右键就完成粘 ...