如何动态实现动态切换选项卡

Question

楼主要好好学下js啊，都写好给你了都不会扩展。。做成类的形式，new出实例就行了<ul id="gai-tab" class="news-nav">
                    <li class="first active">
                        <label>俊采深度</label><a href="{PE.Label id="取得节点链接路径" nodeId="37" /}" class="more" title="俊采深度"></a>
                        <ul class="cont1">
                                
{PE.Label id="shouyexinwen" nodeids="37" len="90" ts="5" /}
                                
    
                                
                        </ul>
                    </li>
                    <li>
                        <label>行业新闻</label><a href="{PE.Label id="取得节点链接路径" nodeId="38" /}" class="more" title="行业新闻"></a>
                        <ul class="cont1">
                                
{PE.Label id="shouyexinwen" nodeids="38" len="90" ts="5" /}               
                                
                        </ul>
                    </li>
                    <li>
                        <label>俊采公告</label><a href="{PE.Label id="取得节点链接路径" nodeId="39" /}" class="more" title="俊采公告"></a>
                        <ul class="cont1">
                                
{PE.Label id="shouyexinwen" nodeids="39" len="90" ts="5" /}
                        </ul>
                    </li>
                    <li>
                        <label>解决方案</label><a href="{PE.Label id="取得节点链接路径" nodeId="40" /}" class="more" title="解决方案"></a>
                        <ul class="cont1">
                                
                {PE.Label id="shouyexinwen" nodeids="40" len="90" ts="5" /}   
    
                                
                        </ul>
                    </li>
                        
                        <li>
                        <label>HR专区</label><a href="{PE.Label id="取得节点链接路径" nodeId="41" /}" class="more" title="HR专区"></a>
                        <ul class="cont1">
                                
                        {PE.Label id="shouyexinwen" nodeids="41" len="90" ts="5" /}
                                
                                
                                
    
                                
                        </ul>
                    </li>
                        
                        
                                 <li>
                        <label>人才服务</label><a href="{PE.Label id="取得节点链接路径" nodeId="42" /}" class="more" title="人才服务"></a>
                        <ul class="cont1">
                    {PE.Label id="shouyexinwen" nodeids="42" len="90" ts="5" /}
                                
                        </ul>
                    </li>
                        
                </ul>
<ul id="tab2" class="news-nav">
                    <li class="first active">
                        <label>俊采深度</label><a href="{PE.Label id="A1" nodeId="37" /}" class="more" title="俊采深度"></a>
                        <ul class="cont1">
                                
{PE.Label id="shouyexinwen" nodeids="37" len="90" ts="5" /}
                                
    
                                
                        </ul>
                    </li>
                    <li>
                        <label>行业新闻</label><a href="{PE.Label id="A2" nodeId="38" /}" class="more" title="行业新闻"></a>
                        <ul class="cont1">
                                
{PE.Label id="shouyexinwen" nodeids="38" len="90" ts="5" /}               
                                
                        </ul>
                    </li>
                    <li>
                        <label>俊采公告</label><a href="{PE.Label id="A3" nodeId="39" /}" class="more" title="俊采公告"></a>
                        <ul class="cont1">
                                
{PE.Label id="shouyexinwen" nodeids="39" len="90" ts="5" /}
                        </ul>
                    </li>
                    <li>
                        <label>解决方案</label><a href="{PE.Label id="A4" nodeId="40" /}" class="more" title="解决方案"></a>
                        <ul class="cont1">
                                
                {PE.Label id="shouyexinwen" nodeids="40" len="90" ts="5" /}   
    
                                
                        </ul>
                    </li>
                        
                        <li>
                        <label>HR专区</label><a href="{PE.Label id="A5" nodeId="41" /}" class="more" title="HR专区"></a>
                        <ul class="cont1">
                                
                        {PE.Label id="shouyexinwen" nodeids="41" len="90" ts="5" /}
                                
                                
                                
    
                                
                        </ul>
                    </li>
                        
                        
                                 <li>
                        <label>人才服务</label><a href="{PE.Label id="A6" nodeId="42" /}" class="more" title="人才服务"></a>
                        <ul class="cont1">
                    {PE.Label id="shouyexinwen" nodeids="42" len="90" ts="5" /}
                                
                        </ul>
                    </li>
                        
                </ul>
<script>
    function Tab(id) {
        function contains(t, o) {
            if (t == o) return true;
            while (o = o.parentNode) if (o == t) return true;
            return false;
        }
        var lis = [], ulTab = document.getElementById(id), uls = ulTab.getElementsByTagName('ul'), nowIndex = 0;
        for (var i = 0; i < uls.length; i++) {
            lis[i] = uls[i].parentNode;
            uls[i].style.display = i == 0 ? 'block' : 'none';            lis[i].onmouseover = lis[i].onmouseout = (function (index) {
                return function (e) {
                    e = e || window.event;
                    if (e.type == 'mouseover') {
                        clearInterval(timer);
                        chr(index);
                    }
                    else {
                        var o = e.toElement || e.relatedTarget;
                        if (contains(ulTab, o)) return false;
                        timer = setInterval(function () { chr() }, 3000);
                    }
                }
            })(i);        }
        function chr(index) {
            if (index == undefined) nowIndex++;
            else nowIndex = index;
            if (nowIndex >= uls.length) nowIndex = 0;
            for (var i = 0; i < uls.length; i++) {
                lis[i].className = i == nowIndex ? 'first active' : '';
                uls[i].style.display = i == nowIndex ? 'block' : 'none';
            }
        }
        lis[0].className = 'first active';
        var timer = setInterval(function () { chr() }, 3000);
    }
    new Tab('gai-tab');
    new Tab('tab2')
</script>

Answer 1

不行啊，改了过后是这样的。

Answer 2

你用我的测试，在对照你的结构（注意ID）