如何激活下一个 Li 并设置其 CSS

Question

我有以下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');
//});

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

演示

Answer 1

尝试

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

演示：小提琴

Answer 2

查看演示

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');

Answer 3

即使

当前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/