【精简实用】兼容版本超级简单tab切换代码

精简实用9年前 (2016-07-14)13870

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

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。