提取YUI中的TAB
<!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>
<title>Test Demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body{font:88% arial;}
.navset{position:relative;zoom:1;}
.navset .nav li{display:inline-block;display:-moz-inline-stack;*display:inline;vertical-align:bottom;cursor:pointer;margin:0 6px 0 0;zoom:1;}
.nav,.nav ul,.nav li{margin:0;padding:0;list-style:none;}
.navset li em{font-style:normal;}
.navset .nav{border:solid #2647a0;border-width:0 0 5px;position:relative;zoom:1;}
.navset .nav a{position:relative;}
.navset .nav li a{display:block;vertical-align:bottom;}
.navset .nav li a em{display:block;}
.navset .nav a{background:#d8d8d8 url(http://real.us.yimg.com/lib/yui/2.6.0/build/assets/skins/sam/sprite.png) repeat-x;border:solid #a3a3a3;border-width:0 1px;color:#000;position:relative;text-decoration:none;}
.navset .nav a em{border:solid #a3a3a3;border-width:1px 0 0;cursor:hand;padding:4px 10px 2px;left:0;right:0;bottom:0;top:-1px;position:relative;}
.navset .nav a:hover,.navset .nav a:focus{background:#bfdaff url(http://real.us.yimg.com/lib/yui/2.6.0/build/assets/skins/sam/sprite.png) repeat-x left -1300px;outline:0;}
.navset .nav .selected{margin:0 6px 0px 0;}
.navset .nav .selected a em{padding:8px 10px 2px;font-weight:bold;}
.navset .nav .selected a,.navset .nav .selected a em{border-color:#243356;}
.navset .nav .selected a,.navset .nav .selected a:focus,.navset .nav .selected a:hover{background:#2647a0 url(http://real.us.yimg.com/lib/yui/2.6.0/build/assets/skins/sam/sprite.png) repeat-x left -1400px;color:#fff;}
.navset .content{background:#edf5ff;border:1px solid #808080;border-top-color:#243356;padding:8px;zoom:1;}
</style>
</head>
<body>
<h1>Test Demo</h1>
<div class="navset">
<ul class="nav">
<li><a href="#tab1"><em>Home</em></a></li>
<li class="selected"><a href="#tab2"><em>About Us</em></a></li>
<li><a href="#tab3"><em>Help & FAQ</em></a></li>
</ul>
<div class="content">
<div id="tab1">Tab One Content</div>
<div id="tab2">Tab Two Content</div>
<div id="tab3">Tab Three Content</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body{font:88% arial;}
.navset{position:relative;zoom:1;}
.navset .nav li{display:inline-block;display:-moz-inline-stack;*display:inline;vertical-align:bottom;cursor:pointer;margin:0 6px 0 0;zoom:1;}
.nav,.nav ul,.nav li{margin:0;padding:0;list-style:none;}
.navset li em{font-style:normal;}
.navset .nav{border:solid #2647a0;border-width:0 0 5px;position:relative;zoom:1;}
.navset .nav a{position:relative;}
.navset .nav li a{display:block;vertical-align:bottom;}
.navset .nav li a em{display:block;}
.navset .nav a{background:#d8d8d8 url(http://real.us.yimg.com/lib/yui/2.6.0/build/assets/skins/sam/sprite.png) repeat-x;border:solid #a3a3a3;border-width:0 1px;color:#000;position:relative;text-decoration:none;}
.navset .nav a em{border:solid #a3a3a3;border-width:1px 0 0;cursor:hand;padding:4px 10px 2px;left:0;right:0;bottom:0;top:-1px;position:relative;}
.navset .nav a:hover,.navset .nav a:focus{background:#bfdaff url(http://real.us.yimg.com/lib/yui/2.6.0/build/assets/skins/sam/sprite.png) repeat-x left -1300px;outline:0;}
.navset .nav .selected{margin:0 6px 0px 0;}
.navset .nav .selected a em{padding:8px 10px 2px;font-weight:bold;}
.navset .nav .selected a,.navset .nav .selected a em{border-color:#243356;}
.navset .nav .selected a,.navset .nav .selected a:focus,.navset .nav .selected a:hover{background:#2647a0 url(http://real.us.yimg.com/lib/yui/2.6.0/build/assets/skins/sam/sprite.png) repeat-x left -1400px;color:#fff;}
.navset .content{background:#edf5ff;border:1px solid #808080;border-top-color:#243356;padding:8px;zoom:1;}
</style>
</head>
<body>
<h1>Test Demo</h1>
<div class="navset">
<ul class="nav">
<li><a href="#tab1"><em>Home</em></a></li>
<li class="selected"><a href="#tab2"><em>About Us</em></a></li>
<li><a href="#tab3"><em>Help & FAQ</em></a></li>
</ul>
<div class="content">
<div id="tab1">Tab One Content</div>
<div id="tab2">Tab Two Content</div>
<div id="tab3">Tab Three Content</div>
</div>
</div>
</body>
</html>
