如何实现选项卡自动切换

南林狼 2013-12-02 08:19:39


如上图，如何实现选项卡的自动切换，比如：第一个界面是在俊采深度，3秒钟后希望自动变为“行业新闻，以此类推”
<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>

			</div>

			<div class="gaibottom"></div>

		</div>

求给出详细的js代码,我想直接插入到html代码中。谢谢！
...全文
391 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
南林狼 2013-12-10
  • 打赏
  • 举报
 回复
引用 12 楼 showbo 的回复:
<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>
<script>
    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('gai-tab'), 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) {
                //if (this.className.indexOf('active') == -1) return false
                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);
</script>
引用 12 楼 showbo 的回复:
<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>
<script>
    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('gai-tab'), 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) {
                //if (this.className.indexOf('active') == -1) return false
                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);
</script>
非常感谢，已经弄好了，谢谢
Go 旅城通票 2013-12-09
  • 打赏
  • 举报
 回复 
<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>
<script>
    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('gai-tab'), 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) {
                //if (this.className.indexOf('active') == -1) return false
                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);
</script>
南林狼 2013-12-08
  • 打赏
  • 举报
 回复
引用 8 楼 showbo 的回复:
<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>
<script>
function contains(t,o){
  if(t==o)return true;
  while(o=o.parentNode)if(o==t)return true;
  return false;
}
    var lis = [], uls = document.getElementById('gai-tab').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(e){
if(this.className.indexOf('active')==-1)return false
e=e||window.event;
if(e.type=='mouseover')clearInterval(timer);
else{
  var o=e.toElement||e.ralatedTarget;
  if(contains(this,o))return false;
  timer=   setInterval(chr, 3000);
}
}

}
function chr() {
        nowIndex++;
        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(chr, 3000);
</script>
貌似还是不行啊，鼠标停留基本上不起作用啊，比如说它自动切换到“俊采公告”，我把鼠标停在”俊采深度“上，“俊采深度”栏目下显示的是空白，我希望的是：鼠标停留在标题栏上是，停止自动切换，鼠标移走，又恢复自动切换。谢谢
hch126163 2013-12-08
  • 打赏
  • 举报
 回复
http://blog.csdn.net/hch126163/article/details/6050485
Go 旅城通票 2013-12-07
  • 打赏
  • 举报
 回复 
<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>
<script>
function contains(t,o){
  if(t==o)return true;
  while(o=o.parentNode)if(o==t)return true;
  return false;
}
    var lis = [], uls = document.getElementById('gai-tab').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(e){
if(this.className.indexOf('active')==-1)return false
e=e||window.event;
if(e.type=='mouseover')clearInterval(timer);
else{
  var o=e.toElement||e.ralatedTarget;
  if(contains(this,o))return false;
  timer=   setInterval(chr, 3000);
}
}

}
function chr() {
        nowIndex++;
        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(chr, 3000);
</script>
南林狼 2013-12-07
  • 打赏
  • 举报
 回复
引用 6 楼 showbo 的回复:
<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>
<script>
    var lis = [], uls = document.getElementById('gai-tab').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[0].className = 'first active';
    setInterval(function () {
        nowIndex++;
        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';
        }
    }, 3000);
</script>
非常感谢，但是还是有问题，我想做到鼠标停留的优先级大于自动切换，也就是我的鼠标停留在上面，他就停止自动切换，但是想在还不行。
南林狼 2013-12-04
  • 打赏
  • 举报
 回复
引用 4 楼 mycggo 的回复:
[quote=引用 1 楼 u011461314 的回复:] 
var items=[elm1,elm2,elm3];
var now = 0;
var len = items.length;
function change(){
	var pass = now;
	if(now == len){
		now = 0;
	}else{
		now = now+1;
	}
	removeClass(items[pass],'active');
	addClass(items[now],'active');
}
var time = setinterval(change,3000);
不错，这段代码如何更好的和当点击某一选项卡时结合呢？ 谢谢[/quote] 请问你懂不懂这个啊？你解决没有？
Go 旅城通票 2013-12-04
  • 打赏
  • 举报
 回复 
<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>
<script>
    var lis = [], uls = document.getElementById('gai-tab').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[0].className = 'first active';
    setInterval(function () {
        nowIndex++;
        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';
        }
    }, 3000);
</script>
南林狼 2013-12-03
  • 打赏
  • 举报
 回复
引用 1 楼 u011461314 的回复:
var items=[elm1,elm2,elm3];
var now = 0;
var len = items.length;
function change(){
	var pass = now;
	if(now == len){
		now = 0;
	}else{
		now = now+1;
	}
	removeClass(items[pass],'active');
	addClass(items[now],'active');
}
var time = setinterval(change,3000);
这个可不可以帮我写的和我给的那个代码结合起来，因为我几乎不懂js
phoenix-sky 社区高级成员 T9 2013-12-03
  • 打赏
  • 举报
 回复
引用 1 楼 u011461314 的回复:
var items=[elm1,elm2,elm3];
var now = 0;
var len = items.length;
function change(){
	var pass = now;
	if(now == len){
		now = 0;
	}else{
		now = now+1;
	}
	removeClass(items[pass],'active');
	addClass(items[now],'active');
}
var time = setinterval(change,3000);
不错，这段代码如何更好的和当点击某一选项卡时结合呢？ 谢谢
似梦飞花 2013-12-02
  • 打赏
  • 举报
 回复
最笨的方法 给标签执行click()
zhjdg 2013-12-02
  • 打赏
  • 举报
 回复 
var items=[elm1,elm2,elm3];
var now = 0;
var len = items.length;
function change(){
	var pass = now;
	if(now == len){
		now = 0;
	}else{
		now = now+1;
	}
	removeClass(items[pass],'active');
	addClass(items[now],'active');
}
var time = setinterval(change,3000);
JS实现选项卡的切换
选项卡的内容切换
JS实现选项卡切换
JS实现选项卡的切换
Vue实现选项卡切换
Vue实现选项卡切换 前言 用原生JS写过一个选项卡切换功能，但是相对比较复杂，然而用Vue实现就相对比较简单了 首先需要引入vue.js <!-- 引入vue.js --> <script src="./js/vue.js"></script> 页面元素的DOM结构也相对比较简单，因为使用了v-for进行循环，比原生JS编写时还要简洁，如下 <div id="app"> <!-- ul用来控制上部分切换模块 --> <
通过VUE实现简单选项卡切换
通过VUE实现简单选项卡切换
html如何实现选项卡切换思路,Tab选项卡切换完整思路及实现，值得珍藏
原标题：Tab选项卡切换完整思路及实现，值得珍藏这篇文章是从微信上转载过来的，原文作者是“Java实例解析”，文章内容很棒，只是这个作者可能是一时看不到效果，所以没更新几篇就放弃了，让人惋惜。今天要推荐给大家的这个js动画效果，基本上每个网站都会出现，就是tab选项卡的切换效果。这个效果如果使用jQuery这些框架的话，写起来就很方便，但是，为了提高我们的写原生js的能力，所以我一般都会说用原生j...
JavaScript

87,909

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章