0

我有以下html....

<ul id="navs">
    <li class="activenav">one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ul>

css...

.activenav{
    background-color: red;
}

jQuery....

//$(window).load(function(){
    var $curli = $('#navs .activenav');
setInterval(function(){
    $('#navs .activenav').removeClass('activenav');
    $curli.next().addClass('activenav');

}, 2000); 
$curli = $('#navs .activenav');
//});

关键问题是它只在第一次运行。我需要从当前的 li 设置下一个的背景颜色，即.activenav. 而且我还需要在加载功能中执行此操作，但目前我评论说即使外部加载功能也不起作用。

演示

4

3 回答 3

0

即使当前active元素是列表的最后一个元素，这也会处理。 

   var ul = $('#navs');
   function switchActive(){
        var li =  ul.find('.activenav'), next;
        if(li.is(':last')){
           next = ul.find('li:first');
        }else{
           next = li.next();
        }
        li.removeClass('activenav');
        next.addClass('activenav');
   }
   switchActive();

switchActive每次切换下一次都需要调用。这是相同的http://jsfiddle.net/W4p3P/

于 2013-09-18T10:53:37.070 回答
0

看演示

setInterval(function () {
    var $curli = $('#navs .activenav');
    var $next = $curli.next();
    $curli.removeClass('activenav');
    if (!$next.length) {
        $('#navs li').first().addClass('activenav');
    } else {
        $next.addClass('activenav');
    }
    ind++;
}, 1000);
$curli = $('#navs .activenav');
于 2013-09-18T10:59:45.997 回答
0

尝试

var $navlis = $('#navs li')

setInterval(function(){
    var $next = $navlis.filter('.activenav').removeClass('activenav').next();
    if(!$next.length){
        $next = $navlis.first();
    }
    console.log($next)
    $next.addClass('activenav');

}, 2000);

演示：小提琴

于 2013-09-18T10:59:48.747 回答