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 相关文章推荐
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
vue实现移动端省市区选择
Sep 27 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
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
js打印纸函数代码(递归)
2010/06/18 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
wxPython的安装图文教程(Windows)
2017/12/28 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
python中return如何写
2020/06/18 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
聊聊python中的异常嵌套
2020/09/01 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
送给程序员的20个Java集合面试问题
2014/08/06 面试题
教师实习自我鉴定
2013/12/18 职场文书
法制宣传月活动总结
2014/04/29 职场文书
客户答谢会致辞
2015/01/20 职场文书
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫