jq写tab切换

1 $(‘.index-news-sub-box ul li‘).click(function(){
2     var i=$(this).index();
3     var img=$(‘.index-news-img-box a img‘);
4     img.removeClass(‘z-index-2‘);
5     img.eq(i).addClass(‘z-index-2‘).siblings().removeClass(‘z-index-2‘);
6 });

原理:给某个按钮绑定点击事件;被点击的当前元素显示(可以设置display:block;也可以设置z-index:1;),其他的兄弟元素隐藏(可以设置display:none;也可以设置z-index:0;).

前提:按钮个数和被切换的内容区的个数相等,且按钮要有想同的标识(class,id,或标签),内容区同理。

原文地址:https://www.cnblogs.com/candy-Yao/p/8401637.html

时间: 2024-07-30 11:09:40

jq写tab切换的相关文章

教你如何用纯CSS写Tab切换

说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: Tab切换 方法一:模拟单选框原理 该方法大致原理如下: 当用户点击label元素时,该label所绑定的input单选框就会被选中,同时通过使用CSS选择器让被选中的input元素之后的label和.content元素都加上相应的样式. 具体如何实现呢?请耐心往下看... 1. HTML结构 <!--HTML--> &l

css3写tab切换

转自:http://code.hcharts.cn/about.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <meta name="viewport&q

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

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 28.0px Consolas; color: #888471 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 28.0px Consolas; color: #888471; min-height: 33.0px } span.Apple-tab-span { white-space: pre } <script type="text/javascr

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

scrollIntoView(alignWithTop) 是html5新特性中的一个元素,他主要是指滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素. alignWithTop是true或者是false哦.如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐. 我们见动图 见代码 scrollIntoView还可以实现类似于我们常见的tab切换的效果 一些具体的效果见动图 代码如下 使用scrollIntoView实现tab切换和直接使用jq

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

自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12px;}ul{list-style:none;}ul li a{text-decoration:none; color:#000000;}ul li a:hover{text-decoration:underline; color:#cc0000;}#con{margin:50px auto; width:96

react做tab切换的几种方式

最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到.当然,你也可以在react当中用jquery或者zepto来实现,不过既然都用react了,能不能用jq,就尽量不用jq.不过不得不吐槽一下,在jquery很简单的东西,在react中稍微复杂化了一点. 目前我用到的tab切换只有两种方式,所以暂时总结这两种,以后有遇到其他的再总结. 第一种.只是子

tab切换-2016.6.4

以前的tab切换,一般都是自己找网上的源代码,不知道含义,直接套,然后会有一些不知道的问题出现. 最近学习了jq(当然属于懒人的我,学习进度很慢),然后再工作中遇到了tab选项卡,所以决定自己写一个. 效果展示(没有美化): 即当鼠标点击头部上面菜单时,底下相对应的div出现. HTML: <div class="div-tab"> <ul class="div-tab-head"> <li class="head-on&qu

原生javascript实现Tab切换

tab切换在各大主流页面有广泛的应用,今天来分享一个用原生javascript来实现类似京东购物边栏的TAB.对于正在使用web前端开发(http://www.maiziedu.com/course/web/)网站的朋友,是非常有用的哦. 首先以下是一段边栏HTML框架代码 <body> <div class="wrap"> <div id="left"> <ul id="leftList"> &l

tab切换

今天我们开始试着写一些js特效,先写一个简单的tab切换,在现实生活中,一些网站tab切换是必不可少的,来下面让我们一起写一下 1,思路: 当点击的时候实现切换并改变里面的内容jQuery实现 2,代码 html代码 1 <div class="wrapper"> 2 <ul class="tab"> 3 <li class="tab-item active">国际大牌<span>◆</spa