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 相关文章推荐
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
微信小程序实现下拉加载更多商品
Dec 29 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
玩转图像函数库―常见图形操作
2006/09/03 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
使用js获取QueryString的方法小结
2010/02/28 Javascript
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
js实现搜索栏效果
2018/11/16 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
Python字符串处理实现单词反转
2017/06/14 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
python实现彩票系统
2020/06/28 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
大三学生入党思想汇报
2014/01/02 职场文书
土地租赁协议书
2015/01/29 职场文书