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

关键问题是它仅在第一次运作。我需要从当前的li .activenav设置next的背景颜色。而且我还需要在加载功能中执行此操作，但目前我已经评论过即使外部加载功能也无效。

demo

Answer 1

即使当前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();

每次下次切换时都需要调用{p> switchActive。这是同一个http://jsfiddle.net/W4p3P/

Answer 2

参见 demo

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

尝试

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

演示：Fiddle

如何让下一个活跃并设置其CSS？

3 个答案: