$('.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切换的更多相关文章

  1. js或者jq的tab切换

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. 微信小程序写tab切换

    微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view ...

  3. 教你两招用纯CSS写Tab切换

    说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下:   Tab切换 方法一:模 ...

  4. jquery写tab切换,三行代码搞定

    <script type="text/javascript"> $("button").on("click",function( ...

  5. 关于scrollintoview()真的是有意思极了,结合普通tab切换一起看看

    scrollIntoView(alignWithTop) 是html5新特性中的一个元素,他主要是指滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素. alignWithTop是true ...

  6. jquery写的tab切换效果 非常简单

    自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12p ...

  7. 一款jquery写出来的tab切换

    当时做这个的时候,当前状态是不规则的,li对应的有3块内容,分别设定不同背景图片,只显示当前的一个背景,鼠标移上去的时候其余2个用background-position: -1000px 0px;来隐 ...

  8. jq 折面板+tab切换(自己封装的插件哦!!)

    如上图所示的一个折面板效果+tab切换:最重要的js代码如下: 对于布局简单介绍下: hot_wrap_li 这个是带箭头的横条: Arrow 这个是箭头的div:hot_wrap_li_wrap 这 ...

  9. tab切换-2016.6.4

    以前的tab切换,一般都是自己找网上的源代码,不知道含义,直接套,然后会有一些不知道的问题出现. 最近学习了jq(当然属于懒人的我,学习进度很慢),然后再工作中遇到了tab选项卡,所以决定自己写一个. ...

随机推荐

  1. SoapUI测试接口【转】

    下载安装soapUI工具,具体安装按照提示往下走就可以,这里不着重说明,下面是我打开soapUI工具的起始窗口:  在Projects上鼠标右键点击,选择new soap project(新建一个SO ...

  2. SpringMVC参数绑定(未完待续)

    1. Strut2与SpringMVC接收请求参数的区别 Struts2通过action类的成员变量接收SpringMVC通过controller方法的形参接收 2. SpringMVC参数绑定流程 ...

  3. React中的this.props.children

    React this.props.children this.props对象的属性与组件的属性一一对应,但是有一个例外,就是this.props.children属性.它表示组件的所有子节点. var ...

  4. 洛谷P2890 [USACO07OPEN]便宜的回文Cheapest Palindrome

    题目链接: 点我 题目分析: 玄学\(dp\) 设\(val[s[i] - 'a' + 1]\)表示字母\(s[i]\)的花费 首先发现对于一个已经回文了的串\(s[i, j]\),在\(s[i - ...

  5. 菜鸟nginx源码剖析数据结构篇(五) 基数树 ngx_radix_tree_t[转]

    菜鸟nginx源码剖析数据结构篇(五) 基数树 ngx_radix_tree_t Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blo ...

  6. mysql 乐观判断 校验

    说下场景, 用户账户 有 100 元钱,  他执行了两个操作,  A操作发红包发了80块钱, B操作 发红包 发了 70 ,并发, 假如没有 冻结这一说法,  两个操作都是去 查询余额, 还有100 ...

  7. 《DSP using MATLAB》Problem 8.17

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  8. python学习笔记4.2_正则表达式

    常用正则表达式:http://tool.chinaz.com/regex/ 1.正则表达式:提供了一种在文本中灵活查找或匹配字符串模式的方法.单个表达式通常被称为regex. 2.python的re模 ...

  9. js如何往数组Array中添加元素 (2013-09-04 10

    unshift:将参数添加到原数组开头,并返回数组的长度 pop:删除原数组最后一项,并返回删除元素的值:如果数组为空则返回undefined push:将参数添加到原数组末尾,并返回数组的长度 co ...

  10. [Hdu-5155] Harry And Magic Box[思维题+容斥,计数Dp]

    Online Judge:Hdu5155 Label:思维题+容斥,计数Dp 题面: 题目描述 给定一个大小为\(N*M\)的神奇盒子,里面每行每列都至少有一个钻石,问可行的排列方案数.由于答案较大, ...