jquery简单几句代码就显示tab切换

html代码:

<div class="ry_jj_tab">
<div class="tab_box">
<a href="#tab1" class="selected" onclick="js_method();return false;">基本信息</a>
<a href="#tab2" onclick="js_method();return false;">荣誉与评价</a>
<a href="#tab3" onclick="js_method();return false;">代表业绩</a>
<a href="#tab4" onclick="js_method();return false;">社会活动</a>
<a href="#tab5" onclick="js_method();return false;">主要著述</a> </div>
<div class="tab_main tab_main1" id="tab1"> <!-- <span class="xx"></span> -->

<div class="tab_main_box"> {dede:field.jibenxinxi/} </div>
</div>
<div class="tab_main tab_main1" id="tab2" style="display: none;"> <span class="xx"></span>
<div class="tab_main_box"> {dede:field.rongyu/} </div>
</div>
<div class="tab_main tab_main1" id="tab3" style="display: none;"> <span class="xx"></span>
<div class="tab_main_box"> {dede:field.yeji/} </div>
</div>
<div class="tab_main tab_main1" id="tab4" style="display: none;"> <span class="xx"></span>
<div class="tab_main_box"> {dede:field.shehuihuodong/} </div>
</div>
<div class="tab_main tab_main1" id="tab5" style="display:none;"> <span class="xx"></span>
<div class="tab_main_box"> {dede:field.zhushu/} </div>
</div>
</div>

下面是js代码

<script>
$(document).ready(function(){

$(function(){
$(".tab_box > a").on("click",function(){//给.tab_box > a 这个对象绑定点击事件
var index = $(this).index();//获取到点击对象的索引值存到index这个变量中
$(this).addClass("selected").siblings().removeClass("selected");//点击对象高亮,同胞节点删除高亮
$(".tab_main1").eq(index).css("display","block").siblings(".tab_main1").css("display","none");//想要显示点击的内容,其他不节点内容隐藏
})
})

})
</script>

ps:以前一直不理解$(this)这个变量是干啥的,今天总算领悟到了,这个是当前事件的对象,index()索引值,$(this).index()点击对象的索引值。

时间: 2024-10-13 00:03:16

jquery简单几句代码就显示tab切换的相关文章

C#简单一句代码,实现pictureBox的照片另存为磁盘文件不出错

开发人事档案系统时,一般都要利用pictureBox对人员的照片进行操作,包括选择保存照片.另存照片.删除照片,如下图: 将照片保存到数据库和从数据库中删除,网友写了很多实用代码,非常好用.但是要将pictureBox上显示的照片另存为磁盘文件时,非常容易出现“GDI+ 发生一般性错误”.网上有很多建议,都不符合我的要求,要么另存出来的照片不能正常显示,要么代码非常繁琐.经过我测试,其实方法很简单,C#一句代码就可以实现pictureBox照片另存为磁盘文件而不出错.主要代码如下: if (Sa

jquery简单轮播代码

@charset "utf-8"; html, body { font-family:"微软雅黑"} div.slideBox{ position:relative; width:670px; height:300px; overflow:hidden;} div.slideBox ul.items{ position:absolute; float:left; background:none; list-style:none; padding:0px; margi

jquery简单的大背景banner图片全屏切换

详细内容请点击 这个是我初毕业刚进公司那会帮同事(同时也是同学)写的一个PC端的全屏图片切换效果,对于刚毕业的我来说写出来那会的喜悦之情是无法言表的,那时的我还是什么不懂的小白白,俗称菜鸟.个人网站上线不久,最近整理整理从前的一些小逼格的事 大背景全屏切换效果图:    大背景全屏切换效果html内容: <!--banner图片切换开始--><div class="banner"> <div class="block none">

JQuery弹出层,实现弹层切换,可显示可隐藏。

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>jQuery弹出层效果</title> 5 <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /> 6 <meta c

react简单的tab切换 (styled-components)

其实,在我们日常的编程当中,经常会碰到tab切换的模块,那么,实现他的方法也有很多中,下面是一款简单,容易理解的react tab切换方法. 通过设置state中的current 属性去控制tab 和 内容模块. this.state = { current: 0, cities:['香港','北京','上海','台北'], content:[{ number: '13866666666', email: '[email protected], time: 'test123', },{ numb

教你如何用纯CSS写Tab切换

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

jquery简单的tab切换特效插件jquery-tab demo代码下载

原文:jquery简单的tab切换特效插件jquery-tab demo代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463496178688.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

基于jQuery左侧小图滚动右侧大图显示代码

今天给大家分享一款 jQuery左侧小图滚动右侧大图显示代码是一款基于jQuery实现的左侧滚动图片点击大图查看效果代码.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="caseImg03 w1002"> <div class="slideCase03"> <div class=&q

Jquery 简单的Tab选项卡特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-