jQuery实现的一个tab切换效果内部还嵌有切换


Posted in Javascript onAugust 10, 2014

大致效果如图

jQuery实现的一个tab切换效果内部还嵌有切换

下面是代码:自己导入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>
Javascript 相关文章推荐
JS获取scrollHeight问题想到的标准问题
May 27 Javascript
学习ExtJS form布局
Oct 08 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
js实现一个猜数字游戏
Mar 31 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
vue实现简单全选和反选功能
Sep 15 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 #Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 #Javascript
js中直接声明一个对象的方法
Aug 10 #Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 #Javascript
js中window.open打开一个新的页面
Aug 10 #Javascript
window.location.href的用法(动态输出跳转)
Aug 09 #Javascript
javascript父、子页面交互技巧总结
Aug 08 #Javascript
You might like
用php将任何格式视频转为flv的代码
2009/09/03 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
js 图片等比例缩放代码
2010/05/13 Javascript
JS分割字符串并放入数组的函数
2011/07/04 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
python中有帮助函数吗
2020/06/19 Python
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
文字自荐书范文
2014/02/10 职场文书
团代会宣传工作方案
2014/05/08 职场文书
好的促销活动方案
2014/08/21 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
诉讼授权委托书
2014/10/15 职场文书
中班下学期个人总结
2015/02/12 职场文书
单独二胎证明
2015/06/24 职场文书
电工实训心得体会
2016/01/14 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL