$('.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. nodejs vue-cli 微信公众号开发(一) 申请域名搭建服务器

    一.搭建本地服务器 1.首先保存本地的80端口被node监听,利用内网穿透工具把80端口映射出去.(ngrok工具可以穿透内网使本地ip作为外网使用) 2.打开https://natapp.cn/tu ...

  2. HZOI20190725 B 回家 tarjan

    题目大意:https://www.cnblogs.com/Juve/articles/11226266.html 题解: 感觉挺水的,但考场上没打出来 题目翻译一下就是输出起点到终点必经的点 其实就是 ...

  3. Python-面向对象之高级进阶

    目录 classmethod与staticmethod 面向对象高级 isinstance.issubclass 反射 魔法方法(类内置方法) 单例模式 classmethod与staticmetho ...

  4. 微信公众号 SVG长按互动

    <section class="" style="display: block;width: 100%;height:667px;overflow:hidden;m ...

  5. 图书-技术-SpringBoot:《Spring Boot2 + Thymeleaf 企业应用实战》

    ylbtech-图书-技术-SpringBoot:<Spring Boot2 + Thymeleaf 企业应用实战> <Spring Boot 2+Thymeleaf企业应用实战&g ...

  6. Android之FrameLayout帧布局

    1.简介 这个布局直接在屏幕上开辟出一块空白的区域,当我们往里面添加控件的时候,会默认把他们放到这块区域的左上角; 帧布局的大小由控件中最大的子控件决定,如果控件的大小一样大的话,那么同一时刻就只能看 ...

  7. python基础-基础知识考试_day5 (包括:函数_递归等知识)

    老男孩 Python 基础知识练习(三) 1.列举布尔值为 False 的值空,None,0, False, '', [], {}, () 2.写函数:根据范围获取其中 3 和 7 整除的所有数的和, ...

  8. 让ASPX页面可以提交html标签代码的配置

    1:打开web.config文件,在system.web节点里,添加<httpRuntime requestValidationMode="2.0" /> 2:在asp ...

  9. ftp文件上传下载命令

    介绍:从本地以用户wasqry登录的机器1*.1**.21.67上通过ftp远程登录到ftp服务器上,登录用户名是lte****,以下为使用该连接做的实验.  查看远程ftp服务器上用户lte**** ...

  10. PKU OJ A Bug's life

    http://bailian.openjudge.cn/tm2018/G/ #include <iostream> #include <vector> #include < ...