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 tips提示效果
Apr 03 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
es6学习之解构时应该注意的点
Aug 29 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
vue实现select下拉显示隐藏功能
Sep 30 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建立外键
2006/11/25 PHP
isset和empty的区别
2007/01/15 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
Python实现测试磁盘性能的方法
2015/03/12 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
详解Python的三种可变参数
2019/05/08 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
在python中使用nohup命令说明
2020/04/16 Python
职业生涯规划设计步骤
2014/01/12 职场文书
户外拓展活动方案
2014/02/11 职场文书
合作协议书怎么写
2014/04/18 职场文书
体育运动口号
2014/06/09 职场文书
学校节水倡议书
2015/04/29 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
MySQL infobright的安装步骤
2021/04/07 MySQL
python 如何用terminal输入参数
2021/05/25 Python
python中pandas对多列进行分组统计的实现
2021/06/18 Python