jQuery实现的一个tab切换效果,(内部还有切换)。
来源:互联网 发布:存货管理论文的数据 编辑:程序博客网 时间:2024/05/22 09:07
大致效果如图
下面是代码:自己导入jQuery包。
样式:
<style type="text/css">body,ul,li,div,a{margin:0px;padding:0px;}body{margin-top:10px;margin-left:15px;}#all{border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;width:255px;}#title li{float:left;list-style:none;width:50px;border-top:2px solid #f60;border-right:1px solid #ccc;text-align:center;padding-top:3px;}#title li:last-child{border-right:1px solid #fff;}.new{border-bottom:1px solid #fff;color:#f60;} .old{border-bottom:1px solid #ccc;}#content{clear:both;}#content ul{margin-left:5px;list-style:none;float:left;}#content li{width:40px;height:30px;background-color:#f60;text-align:center;color:#fff;}.inContent{width:205px;height:90px;background-color:#f6c;margin-left:50px;}</style>js代码:
<script type="text/javascript">$(function(){$("#title li:first").addClass("new").siblings().addClass("old");$("#content div:first").show().siblings().hide();$(".inContent:first").show().siblings().hide();$("#title li").click(function(){$(this).addClass("new").removeClass("old").siblings().addClass("old").removeClass("new");$(".info").hide().eq($("#title li").index(this)).show();$(".info div:first-child").show().siblings().hide();});$(".info li").mouseover(function(){$(this).css("color","#20f");$(".inContent").hide().eq($(".info li").index(this)).show();});$(".info li").mouseout(function(){$(this).css("color","#fff");});});</script>
html结构:
<div id="all"><div id="title"><ul><li>要闻</li><li>国内</li><li>时尚</li><li>旅游</li><li>科技</li></ul></div><div id="content"><div style="clear:both;" class="info"><ul><li>01</li><li>02</li><li>03</li></ul><div><div class="inContent">1aaa看你是些在li标签里面还是些在li 的a标签里面如果是1aaa</div><div class="inContent">1bbb看你是些在li标签里面还是些在li 的a标签里面如果是1bbb</div><div class="inContent">1ccc看你是些在li标签里面还是些在li 的a标签里面如果是1ccc</div></div></div><div class="info"><ul><li>01</li><li>02</li><li>03</li></ul><div><div class="inContent">2aaa看你是些在li标签里面还是些在li 的a标签里面如果是1aaa</div><div class="inContent">2bbb看你是些在li标签里面还是些在li 的a标签里面如果是1bbb</div><div class="inContent">2ccc看你是些在li标签里面还是些在li 的a标签里面如果是1ccc</div></div></div><div class="info"><ul><li>01</li><li>02</li><li>03</li></ul><div><div class="inContent">3aaa看你是些在li标签里面还是些在li 的a标签里面如果是3aaa</div><div class="inContent">3bbb看你是些在li标签里面还是些在li 的a标签里面如果是3bbb</div><div class="inContent">3ccc看你是些在li标签里面还是些在li 的a标签里面如果是3ccc</div></div></div><div class="info"><ul><li>01</li><li>02</li><li>03</li></ul><div><div class="inContent">4aaa看你是些在li标签里面还是些在li 的a标签里面如果是4aaa</div><div class="inContent">4bbb看你是些在li标签里面还是些在li 的a标签里面如果是4bbb</div><div class="inContent">4ccc看你是些在li标签里面还是些在li 的a标签里面如果是4ccc</div></div></div><div class="info"><ul><li>01</li><li>02</li><li>03</li></ul><div><div class="inContent">5aaa看你是些在li标签里面还是些在li 的a标签里面如果是5aaa</div><div class="inContent">5bbb看你是些在li标签里面还是些在li 的a标签里面如果是5bbb</div><div class="inContent">5ccc看你是些在li标签里面还是些在li 的a标签里面如果是5ccc</div></div></div></div></div>
- jQuery实现的一个tab切换效果,(内部还有切换)。
- Tab切换效果的实现
- 利用jquery写的一个TAB页切换效果
- jQuery实现tab的切换
- jQuery+css3实现的超酷圆角tab选项卡切换效果
- 实现tab切换效果
- Tab切换动画滑动效果的一个简单实现
- jquery 实现tab切换
- jquery实现tab切换
- JQUERY实现TAB切换
- jquery tab菜单切换效果
- 实现网易新闻的tab切换效果
- jq实现简单的tab切换效果
- jquery实现简单的Tab切换菜单
- jQuery实现简单的tab切换
- 用jQuery实现简单的tab切换
- ajax实现tab切换效果
- ajax实现tab切换效果
- go语言开发环境配置:sublime text3+gosublime+gocode
- 你所不知道的Oracle后台进程SMON功能
- 4.2 控件双击事件和触摸事件同时响应
- 【线段树】COGS 1427. zwei
- 4.3 android下事件的的传递机制
- jQuery实现的一个tab切换效果,(内部还有切换)。
- 80x86汇编语言程序错误分析
- 4.4 自由移动的Toast效果
- we
- rails + bootstrap 做项目使用的一些插件
- 4.5 腾讯手机卫士小火箭发射效果
- Red5 流处理架构设计解析
- 4.6 应用桌面快捷图标
- 在我的心中