jquery版选项卡

jquery版选项卡
1.首先写好html代码和css的代码,比较简单就不介绍了.
2.引入jquery.
3.script>
div1下的button添加点击事件{
取消所有button的class样式;
隐藏div1下的div;
显示点击对应的 div;
将当前被点击按钮变成选中的;
}

选项卡完成.

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style> #div1 .active{background-color: orange}#div1 button{width: 100px; height: 30px; background-color: gray; font-size: 18px; color: blue}#div1 div{width: 400px; height: 400px; border: 1px  solid black; display: none}</style><script src = '../jquery-1.10.1.min.js'></script><script>$(function(){$("#div1").find("button").click(function(){//取消所有button的class样式$("#div1").find("button").attr("class", "");$("#div1").find("div").css("display", "none").eq($(this).index()).css("display", "block");//将当前被点击按钮变成选中的$(this).attr("class", "active");})})</script></head><body><div id = 'div1'><button class = 'active'>钢铁侠</button> <!-- index = 0 --><button>黑寡妇</button><!-- index = 1 --><button>绿巨人</button><!-- index = 2 --><div style = 'display: block'>《钢铁侠》（Iron Man）是由美国漫威电影工作室出品的一部科幻冒险电影，改编自同名系列漫画，由乔恩·费儒执导，小罗伯特·唐尼及格温妮斯·帕特洛、杰夫·布里吉斯等主演。该作也是“漫威电影宇宙”系列的首部电影。该片于2008年5月2日在美国上映。影片讲述了托尼·斯塔克在遇难后改进了盔甲的功能，化身“钢铁侠”，以一个义务警察的身份保护了这个世界和平的故事</div><div>本名娜塔莎·罗曼诺夫，原是秘密组织神盾局的一名俄国籍女探员，体态婀娜面容姣好，头脑清晰行动敏捷，身手不凡强硬凶狠，是神盾局的精英特工。娜塔莎最初被安排在斯塔克工业内部作为卧底，负责监视钢铁侠托尼·斯塔克，后正式加入复仇者联盟。 </div><div>浩克（Hulk）是美国漫威漫画旗下超级英雄，初次登场于《不可思议的浩克》（The Incredible Hulk）第一期（1962年5月），由斯坦·李和杰克·科比联合创造。本名罗伯特·布鲁斯·班纳（Robert Bruce Banner），是世界著名的物理学家，在一次意外中被自己制造出的伽玛炸弹（Gamma Bomb）的放射线大量辐射，身体产生异变，后每当他情绪激动心跳加速的时候就会变成名为浩克的绿色怪物。由于变身后往往不受控制，所以为了不伤害身边的人，班纳游走于世界各地寻找控制愤怒的方法，即便如此班纳的浩克身份还是时常会造成毁灭性的破坏，因此常成为警方与有关单位追捕的对象。</div></div></body>
</html>

jquery版选项卡相关推荐

tabs选项卡切换效果（jquery版）
以前写过一篇 tabs选项卡切换效果,不过是用原生 javascript 写的,最近在学习 jquery,今天抽空用 jquery 重写了这个效果. 效果图如下: html 代码如下: <!DO ...
jQuery之选项卡的实现
jQuery实现选项卡功能.首先将界面搭建好. 有导航头tab_menu,还有内容tab_box. 要实现的效果就是,点击后,将相应的内容显示出来,其他内容隐藏掉. 同时为了展现选中状态,为选中的项添 ...
用Jquery实现选项卡功能
jQuery实现选项卡功能.首先将界面搭建好.有导航头tab_menu,还有内容tab_box.要实现的效果就是,点击后,将相应的内容显示出来,其他内容隐藏掉.同时为了展现选中状态,为选中的项添加背景 ...
漂亮的jQuery tab选项卡插件
清远大学城网(http://www.qydxc.com) tab选项卡在实际应用中几乎到处可见,像现在大型网站163,QQ,新浪,淘宝都使用了tab选项卡效果,下面我来介绍一款jQuery tab选项 ...
漂亮动态效果信息提示（jquery版）
简单,漂亮,动画效果,用户体验好! 这个效果是在页面头部出现的,出现一下会自动隐藏,上面有x那个提示就要手动关闭一下,其他的都是自动隐藏的! 温馨提示:基于jquery 1.6.2 版本! < ...
jquery版相片墙（鼠标控制图片聚合和散开）
jquery版相片墙(鼠标控制图片聚合和散开) 原文:jquery版相片墙(鼠标控制图片聚合和散开) 照片墙,简单点说就是鼠标点击小图片时,聚合变成一张大图片:点击大图片时,散开变成小图片.这个是我一 ...
jQuery版三级联动案例
jQuery版三级联动案例首先写一个JSON数据 [{"province": "吉林省","cities": [{"city&q ...
jQuery版Ajax的使用
jQuery版的Ajax:是对XMLHttpRequest对象的封装,同时也省去了很多麻烦当然前提是,你需要有一份JQ文件,可以自己去官网上去下载一份. 点击这个网址:JQ文件下载其基本方法就是$ ...
原生态JS和JQuery版的动态添加、删除表格行
过了太久,JQuery都生疏了,闲来没事,写着玩玩. 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). >原生态 ...

jquery版选项卡

jquery版选项卡相关推荐

最新文章

热门文章