纯Xhtml+Css制作的Tab选项卡切换 - WEB标准

当前位置：网站SEO > WEB标准 > 正文

纯Xhtml+Css制作的Tab选项卡切换【WEB标准】

因工作需要，开发了一个纯Xhtml+Css制作的Tab选项卡，完全自创，主要思路还是利用ie6,ie7,Firefox,Chrome等浏览器的Hack来完成。
在此再列出区分ie6,ie7,Firefox,Chrome的Hack写法：
ie6: *html div {}
ie7: *+html div {}
Firefox(Chrome): div {}

下面列出我写的代码：

<!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=gb2312" />
<title>纯Xhtml+Css制作的Tab选项卡切换-SEO大厨</title>
<style type="text/css">
* { margin:0; padding:0; border:none; }
html, body { margin:0; padding:0; border:none; font:12px Arial, Helvetica, sans-serif; }
#sidebar { width:260px; height:290px; margin:0 auto; background:#f1f1f1; border:1px solid #ccc; }
ul, li { list-style:none; margin:0; padding:0; border:none; }
ul { margin:0 1px; }
li {
height:30px;
line-height:30px;
width:86px;
background:#669;
float:left;
text-align:center;
display:block;
}
li a.menu { display:block; zoom:1; }

/* for IE 6 */
*html ul li a.menu div { display:none; }
*html li a.menu #dshow, *html ul li a.menu:hover div { display:block; position:absolute; width:250px; height:250px; text-align:left; line-height:25px; padding-top:5px; }
*html li a.menu #dshow a, *html ul li a.menu:hover div a { padding-right:5px; display:inline; }
*html ul li a.menu:hover { background:none; }

/* for IE 7 */
ul li div { display:none; }
li #dshow, ul li:hover div { display:block; position:absolute; width:250px; height:250px; text-align:left; line-height:25px; padding-top:5px; }
li #dshow a, ul li:hover div a { padding-right:5px; display:inline; }

/* 以下代码用于区分ie6,ie7,Firefox&Chrome */
.d1 { margin:0 0 0 4px; background:#f99; }
*html .d1 { margin:0 0 0 -39px; background:#f99; }
*+html .d1 { margin:0 0 0 -39px; background:#f99; }

.d2 { margin:0 0 0 -82px; background:#666; }
*html .d2 { margin:0 0 0 -125px; background:#666; }
*+html .d2 { margin:0 0 0 -125px; background:#666; }

.d3 { margin:0 0 0 -168px; background:#ccc; }
*html .d3 { margin:0 0 0 -211px; background:#ccc; }
*+html .d3 { margin:0 0 0 -211px; background:#ccc; }
</style>
</head>

<body>
<div id="sidebar">
<ul>
  <li><a href="#A" class="menu">Tab One<!--[if IE 7]><!--></a><!--<![endif]-->
  <!--[if lte IE 6]><table><tr><td><![endif]-->
    <div class="d1" id="dshow">
    <a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a><a href="#111">Tab One</a>
    </div>  
  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
  <li><a href="#B" class="menu">Tab Two<!--[if IE 7]><!--></a><!--<![endif]-->
  <!--[if lte IE 6]><table><tr><td><![endif]-->
    <div class="d2">
    <a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a><a href="#222">Tab Two</a>
    </div>  
  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
  <li><a href="#C" class="menu">Tab Three<!--[if IE 7]><!--></a><!--<![endif]-->
  <!--[if lte IE 6]><table><tr><td><![endif]-->
    <div class="d3">
    <a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a><a href="#333">Tab Thr</a>
    </div>  
  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
</ul>
</div>
<p style="text-align:center; line-height:30px;">Powerer By Daniel , 转载请注明出处：<a href="http://www.cookseo.com">http://www.cookseo.com</a> 2009-06-30<br />选项卡的色块主要是用于调整距离而设置的参考，在实际应用中可以根据自己的需求来修改色块的颜色</p>
</body>
</html>

流行热度：超过人阅读
关键词：xhtml css tab 选项卡
发布日期：daniel 发表于 2009-6-30 13:10:36
所属分类：【网站SEO - WEB标准】 - 【WEB标准】
文章链接：http://www.cookseo.com/blog/css/xhtml_css_tab/ [点击复制] (转载时请注明本文出处及文章链接)
引用地址：点击这里获取该日志的TrackBack引用地址

zblog插件Ping中心常用网址再发一个纯CSS的Tab切换卡

您或许对与WEB标准相关的文章感兴趣：

js+css制作选项卡特效,兼容IE6,IE7,火狐FF及Chrome (2009-6-1 10:7:12)

Firefox的div高度自适应 (2009-5-26 15:42:4)

利用CSS截取文本字数,防止文本溢出 (2009-5-26 15:38:14)

使用Lable标签,提升用户体验! (2009-4-22 19:23:11)

区分IE6.0,IE7.0,FireFox的CssHack写法： (2009-4-20 15:1:33)

CSS(CssReset)定义网站的整体元素样式 (2009-4-9 22:27:38)

css之解决span宽度的完美方案 (2008-12-18 10:55:32)

CSS设计中的黄金分割率应用 (2008-11-14 16:42:59)

本文被踩了(1)次, 既然来了，我也要踩一脚