【精简实用】兼容版本超级简单tab切换代码
<style type="text/css">
.tabs {list-style:none; border-bottom:3px solid #B6B2C1; zoom:1; margin:15px 0 0 0; padding:0;}
.tabs:after {content:""; display:block; height:0; clear:both;}
.tabs li {float:left; width:120px; text-align:center; font-size:14px;}
.tabs a {position:relative; bottom:-4px; padding-bottom:4px; color:#0000cc}
.tabs a, .tabs span {display:block; outline:none; }
.tabs span {background:#f6f6f6; color:#ccc; padding:20px 20px;}
.tabs .current { background:#B6B2C1; font-weight:bold;}
.tabs .current a{ color:#fff; text-decoration:none}
.tabs .current span {background:#B6B2C1;}
</style>
<ul class="tabs" id="tab-cat">
<li class="current"><a href="#mianze">标题一</a></li>
<li><a href="#yinsi">标题二</a></li>
</ul>
<div class="sec_menu" id="mianze"> 中国雅虎之服务与资料是基于「现状」提供,而且中国雅虎明确地表示拒绝对于「服务」、「资料」或「产品」给予任何明示或暗示之保证,包括但不限于,得为商业使用或适合于特定目的之保证。中国雅虎对于因「服务」、「资料」或「产品」所生之任何直接、间接、附带的或因此而导致之衍生性损失不承担任何责任。
</div>
<div class="sec_menu" id="yinsi" style="display:none">
中国雅虎时常会对隐私权政策进行修改。如果在使用用户个人信息政策方面有大幅度修改时,我们会在网页中显眼的位置贴出相关规定以便及时通知用户。
</div>
<script type="text/javascript">
(function() {
function switchTab(tabcontainer) {
if ('string' == typeof tabcontainer) tabs = document.getElementById(tabcontainer).getElementsByTagName('a');
var flag = tabs[0];
for (i = 0, n = tabs.length; i < n; ++i) {
tabs[i].onclick = tabs[i].onfocus = function() {
var related = document.getElementById(this.hash.replace('#', ''));
var flagdiv = document.getElementById(flag.hash.replace('#', ''));
related.style.display = 'block';
this.parentNode.className = 'current';
if (this != flag) {
flagdiv.style.display = 'none';
flag.parentNode.className = '';
}
flag = this;
return false;
}
}
}
switchTab('tab-cat');
})();
function gotoYisi() {
tabs = document.getElementById('tab-cat').getElementsByTagName('a');
tabs[1].onclick();
}
</script>