jquery实现选项卡效果

效果图如下：

css代码如下：

*{margin: 0;padding: 0;}.obox ul li{list-style: none;width: 100px;height: 30px;text-align: center;line-height: 30px;border: 1px solid #E5E5E5;float: left;}.tabCla div{width:408px ;height: 300px;border: 1px solid #E5E5E5;display: none;}.tabCla img{width:408px ;height: 300px;}.tabCla .active{display: block;}

html代码如下：

<div class="obox"><ul><li>诗歌</li><li>名人</li><li>图片</li><li>小零食</li></ul><div class="tabCla"><div class="active">枯藤老树昏鸦，小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯</div><div>李白， 贾玲， 赵丽颖， 翠花</div><div> <img src="img/1.jpg" /> </div><div>卫龙，唐僧肉，深海炸弹，大大泡泡糖 </div></div></div>

jquery代码如下：

 $("ul li").on("click",function(){//获取索引值 var index=$(this).index()console.log(index)$(".tabCla div").eq(index).show().siblings().hide()})

jquery实现选项卡效果相关推荐

用fieldset标签轻松实现Tab选项卡效果
fieldset是一个不常用的HTML标签,它可以将表单内的元素分组显示,legend标签为 fieldset 元素定义标题.由于各浏览器在显示fieldset和legend结构时会自动为其添加边框和 ...
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水平垂直居中_Java Web应用程序集成的jQuery UI选项卡（水平和垂直）示例
jquery水平垂直居中 jQuery UI is built on top of jQuery JavaScript Library to help web developers in creati ...
jquery 实现选项卡
很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...
13款jQuery图片放大镜效果代码
jQuery商城网站商品放大镜查看效果代码 jquery图片放大镜效果制作变焦镜头图片放大查看代码 jQuery鼠标滑过图片放大镜效果_淘宝图片放大镜代码 jquery jqzoom仿京东商城商品详细 ...
jQuery animate动画效果
jQuery animate动画效果 1.animate动画效果 2.animate回调函数 3.参数为数学表达式形式 4.滑动选项卡 1.animate动画效果 <!DOCTYPE html& ...
使用jQuery制作手风琴效果.(转)
http://www.cssrain.cn/article.asp?id=1369 使用jQuery制作手风琴效果本例主要讲解如何利用jQuery创建一个简单的手风琴风格的竖向菜单,从易到难. 第一 ...

jquery实现选项卡效果

jquery实现选项卡效果相关推荐

最新文章

热门文章