JavaScript实现tab效果图
图片地址：http://download.csdn.net/detail/richard_jason/9669782
效果图：
示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab效果</title>
<style type="text/css">
<!--
*{margin:0;padding:0;border:none;text-shadow:1px 0 0 #ddd;}
a{text-decoration:none;}
img{border:0;}
.container{width:890px; overflow:hidden;font-size:14px; border:1px solid #ddd; border-top:2px solid #c00; margin:40px auto;}
#tabbox{width:895px; height:38px; overflow:hidden; background:#ddd; }
#tabbox span{font-family:"微软雅黑"; font-weight:bold;color:#333; background:#F4F5F5; display:block;width:178px; height:37px; line-height:37px; text-align:center; float:left; margin-right:1px; cursor:pointer;_display:inline;}
#tabbox span.curr{ background:#fff; border-bottom:1px solid #fff; color:#c00;}
#cont div{width:100%; overflow:hidden; display:none;}
#cont div dl{width:130px; margin:20px 24px; float:left;_display:inline;}
#cont div dl dt{margin-bottom:10px;}
#cont div dl dd img{width:130px; height:130px;}
#cont div dl dd.des{width:100%; height:32px; line-height:16px; overflow:hidden; font-size:12px;}
#cont div dl dd.des a{color:#333;}
#cont div dl dd.price{width:100%; height:16px; line-height:16px;font-size:12px;color:#999;}
#cont div dl dd.price span{font-weight:bold; color:#c00;}
#cont div.curr{display:block;}
-->
</style>
<script type="text/javascript">
<!--
function setCurr(index){
var arrSpan=document.getElementById("tabbox").getElementsByTagName("span");
for(var i=0;i<arrSpan.length;i++){arrSpan[i].className="";arrSpan[index].className="curr";}
var arrDiv=document.getElementById("cont").getElementsByTagName("div");
for(var j=0;j<arrDiv.length;j++){arrDiv[j].className="";arrDiv[index].className="curr";}
}
//-->
</script>
</head>
<body>
<div class="container">
<div id="tabbox">
<span id="first" class="curr" οnmοuseοver="setCurr(0)">疯狂抢购</span>
<span οnmοuseοver="setCurr(1)">热卖商品</span>
<span οnmοuseοver="setCurr(2)">热评商品</span>
<span οnmοuseοver="setCurr(3)">新品上架</span>
<span οnmοuseοver="setCurr(4)">猜您喜欢</span>
</div>
<!--end tabbox -->
<div id="cont">
<div class="curr">
<dl>
<dt><a href="#"><img src="data:images/tab/img0.jpg" /></a></dt>
<dd class="des"><a href="#">德利诗尔DLSER 2012真皮时尚凉拖款</a></dd>
<dd class="price">价格：<span>￥99.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="data:images/tab/img1.jpg" /></a></dt>
<dd class="des"><a href="#">私募股权投资基金：操作细节与核心范本</a></dd>
<dd class="price">价格：<span>￥44.30</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="data:images/tab/img2.jpg" /></a></dt>
<dd class="des"><a href="#">量化投资：策略与技术（修订版）</a></dd>
<dd class="price">价格：<span>￥70.10</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="data:images/tab/img3.jpg" /></a></dt>
<dd class="des"><a href="#">飞利浦(PHILIPS) SPN2351WA/93 五位/全长</a></dd>
<dd class="price">价格：<span>￥95.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="data:images/tab/img4.jpg" /></a></dt>
<dd class="des"><a href="#">欧珀莱恒久美肌霜50g</a></dd>
<dd class="price">价格：<span>￥256.00</span></dd>
</dl>
</div>
<div>
<dl>
<dt><a href="#"><img src="data:images/tab/img5.jpg" /></a></dt>
<dd class="des"><a href="#">佳能60D单反套机 中端王者！</a></dd>
<dd class="price">价格：<span>￥7999.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="data:images/tab/img6.jpg" /></a></dt>
<dd class="des"><a href="#">蓝狐溪流竿4.5米套装</a></dd>
<dd class="price">价格：<span>￥119.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="data:images/tab/img7.jpg" /></a></dt>
<dd class="des"><a href="#">纽瑞滋海藻DHA核桃油孕妇专用软胶囊 70粒装</a></dd>
<dd class="price">价格：<span>￥268.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="data:images/tab/img8.jpg" /></a></dt>
<dd class="des"><a href="#">如何从商品期货交易中获利（珍藏版）</a></dd>
<dd class="price">价格：<span>￥36.90</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="data:images/tab/img9.jpg" /></a></dt>
<dd class="des"><a href="#">美骆世家男式一脚蹬休闲鞋</a></dd>
<dd class="price">价格：<span>￥108.00</span></dd>
</dl>
</div>
<div>
<dl>
<dt><a href="#"><img src="data:images/tab/img10.jpg" /></a></dt>
<dd class="des"><a href="#">30倍光变！机神来袭！富士SL305 霸气侧漏</a></dd>
<dd class="price">价格：<span>￥1688.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="data:images/tab/img11.jpg" /></a></dt>
<dd class="des"><a href="#">华为C8812 全面现货销售</a></dd>
<dd class="price">价格：<span>￥990.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="data:images/tab/img12.jpg" /></a></dt>
<dd class="des"><a href="#">国虹 W100 水滴 3G手机</a></dd>
<dd class="price">价格：<span>￥698.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="data:images/tab/img13.jpg" /></a></dt>
<dd class="des"><a href="#">三星9228直降300元！双电双充+真皮皮套！</a></dd>
<dd class="price">价格：<span>￥4299.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="data:images/tab/img14.jpg" /></a></dt>
<dd class="des"><a href="#">佳能5D III单反套机</a></dd>
<dd class="price">价格：<span>￥29999.00</span></dd>
</dl>
</div>
<div>
<dl>
<dt><a href="#"><img src="data:images/tab/img15.jpg" /></a></dt>
<dd class="des"><a href="#">立减1402！三星46英寸全高清LED液晶电视！</a></dd>
<dd class="price">价格：<span>￥5999.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="data:images/tab/img16.jpg" /></a></dt>
<dd class="des"><a href="#">宏碁i3 4G 750G 1G独显 Win7</a></dd>
<dd class="price">价格：<span>￥3499.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="data:images/tab/img17.jpg" /></a></dt>
<dd class="des"><a href="#">宏碁V193WVCb 19英寸宽屏液晶显示器</a></dd>
<dd class="price">价格：<span>￥569.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="data:images/tab/img18.jpg" /></a></dt>
<dd class="des"><a href="#">恒源祥家纺 床上用品 斜纹纯棉印花四件套 四件套 1米5 四</a></dd>
<dd class="price">价格：<span>￥299.50</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="data:images/tab/img19.jpg" /></a></dt>
<dd class="des"><a href="#">齐泉黄金五福祥龙银条套装150克 直降优惠</a></dd>
<dd class="price">价格：<span>￥1888.00</span></dd>
</dl>
</div>
<div>
<dl>
<dt><a href="#"><img src="data:images/tab/img20.jpg" /></a></dt>
<dd class="des"><a href="#">舌尖上的中国（7DVD）</a></dd>
<dd class="price">价格：<span>￥99.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="data:images/tab/img21.jpg" /></a></dt>
<dd class="des"><a href="#">satchi/沙驰 高端商务皮鞋</a></dd>
<dd class="price">价格：<span>￥419.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="data:images/tab/img22.jpg" /></a></dt>
<dd class="des"><a href="#">华为C8812 全面现货销售</a></dd>
<dd class="price">价格：<span>￥990.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="data:images/tab/img23.jpg" /></a></dt>
<dd class="des"><a href="#">给你一个公司，看你怎么管2（热销电子书）</a></dd>
<dd class="price">价格：<span>￥7.00</span></dd>
</dl>
<dl>
<dt><a href="#"><img src="data:images/tab/img24.jpg" /></a></dt>
<dd class="des"><a href="#">维棉超细莫代尔冰爽平脚角内裤3条装</a></dd>
<dd class="price">价格：<span>￥109.00</span></dd>
</dl>
</div>
</div>
</div>
</body>
</html>
JavaScript实现tab效果图相关推荐
- java怎么实现tab切换_[Java教程]用javascript实现tab切换
[Java教程]用javascript实现tab切换 0 2016-09-12 14:00:10 html代码: 111111 222222 333333 css代码:.active{ backgro ...
- javascript实现tab切换的方法（2）
方法三:显示和隐藏通过是有拥有class控制,先把所有的内容隐藏dispaly设为none,而该class的display设置为block,遍历所有标题节点和内容节点,点击标题后,该标题节点和对用的内 ...
- JavaScript 实现tab介绍
效果要求: 1.选项卡由英雄联盟.DOTA.风暴英雄.300英雄四块组成: 实现原理: 给介绍内容的块设置 z-index 改变其的显示层级 通过按钮点击切换 代码展示: html <!DOCT ...
- android 纯代码选项卡,纯javascript实现tab选项卡效果代码
提示:您可以先修改部分代码再运行 买家中心 卖家中心 待处理订单(10) 待确定订单(本月购买额度17826.35元(返20元) 本年购买额度您的购买金额排第1名,奖励100元! 待处理订单(10) ...
- 动感效果的TAB选项卡 jquery 插件
动感效果的TAB选项卡 jquery 插件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- 使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
- 前端编码规范之JavaScript
上次浅谈了下关于CSS的编码规范,大部分童鞋持赞同意见,仍存在一些童鞋不太理解这些规范的意义. 如果是个人或者小作坊开发,其实这些所谓的编码规范也没啥意思,因为大家写好的代码直接就给扔到网上去了,很少 ...
- [置顶] android 与JavaScript的互相调用
1.html代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> ...
- JavaScript 动态表格操作
阅读目录 JavaScript 动态创建表格 第一种示例 第二种示例 示例解析 表格相关的属性和方法 1.1 Table 对象集合 1.2 Table 对象方法 1.3 Table 对象常用属性 1. ...
最新文章
- MySQL 的“root”用户修改密码
- asp.net MVC2 Jquery
- java word流_(word)java中字节流示例.doc
- Project Euler 97 ：Large non-Mersenne prime 非梅森大素数
- KeyMob聚合致力于为广大开发者及广告聚合服务
- 中级软件设计师下午试题（百度文库 ）
- paip.提升用户体验=----c++ qt 字体切换功能缺少的总结..
- 51自学网PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程...
- idea继承后重新方法快捷键_idea 查看类继承关系的快捷键
- CentOS 7.2设置中英文环境
- 科目三-上海松江小昆山
- Gluster升级遇到的问题
- JavaScript中常用数组方法总结
- Origin中输入希腊字母
- 韩国中产的今天！76岁的快递员，70岁的站街女......
- 抓包神器：Fiddler Everywhere
- 华为手机计算机的隐藏游戏,怎样把华为手机游戏隐藏起来 | 手游网游页游攻略大全...
- 海伦司上市在即：“嚣张”气势堪比瑞幸，核心竞争力存不存在？
- 计算机专业能当体育老师吗,非师范类专业也能当老师的4个专业，录取率比其它专业还高...
- DirectX11 Effect特效文件