栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

大致效果如图

下面是代码:自己导入jQuery包。

样式:

 
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;} 

js代码:



html结构:

 
 
  • 要闻
  • 国内
  • 时尚
  • 旅游
  • 科技
  • 01
  • 02
  • 03
1aaa看你是些在li标签里面还是些在li 的a标签里面如果是1aaa 1bbb看你是些在li标签里面还是些在li 的a标签里面如果是1bbb 1ccc看你是些在li标签里面还是些在li 的a标签里面如果是1ccc
  • 01
  • 02
  • 03
2aaa看你是些在li标签里面还是些在li 的a标签里面如果是1aaa 2bbb看你是些在li标签里面还是些在li 的a标签里面如果是1bbb 2ccc看你是些在li标签里面还是些在li 的a标签里面如果是1ccc
  • 01
  • 02
  • 03
3aaa看你是些在li标签里面还是些在li 的a标签里面如果是3aaa 3bbb看你是些在li标签里面还是些在li 的a标签里面如果是3bbb 3ccc看你是些在li标签里面还是些在li 的a标签里面如果是3ccc
  • 01
  • 02
  • 03
4aaa看你是些在li标签里面还是些在li 的a标签里面如果是4aaa 4bbb看你是些在li标签里面还是些在li 的a标签里面如果是4bbb 4ccc看你是些在li标签里面还是些在li 的a标签里面如果是4ccc
  • 01
  • 02
  • 03
5aaa看你是些在li标签里面还是些在li 的a标签里面如果是5aaa 5bbb看你是些在li标签里面还是些在li 的a标签里面如果是5bbb 5ccc看你是些在li标签里面还是些在li 的a标签里面如果是5ccc
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/106292.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号