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 sort排序使用方法
Oct 17 Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 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 一元分词算法
2009/11/30 PHP
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
学习python (2)
2006/10/31 Python
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
Python 递归函数详解及实例
2016/12/27 Python
python学生信息管理系统(初级版)
2018/10/17 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
优秀毕业生推荐信范文
2014/03/07 职场文书
个人投资计划书
2014/05/01 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
收费员岗位职责
2015/02/14 职场文书
预备党员介绍人意见
2015/06/01 职场文书
Oracle使用别名的好处
2022/04/19 Oracle
代码复现python目标检测yolo3详解预测
2022/05/06 Python