javascript - 将活动状态更改为随机在页面加载时

Question

我在 JS Bin 中有一个演示。

http://jsbin.com/iigab/1/

我想做的很简单，我希望能够单击一个 li 并给它一个活动类，并让子 div 淡入。对于之前的活动 li，这一切都会反过来发生如果可能的话，也是同一时间。

同样如标题所述，我想在每次用户查看页面时将活动 li 更改为随机的，这可能吗？

乙

Answer 1

看看这个它应该做你想做的事。

$(document).ready(function() {
  var $entries = $('#entries a');
  var randomNumber = Math.floor(Math.random()*$entries.length)

  $entries.click(function(e) {
    e.preventDefault();
    var $this = $(this);
    var $li = $this.parent();
    var activeEntry = $this.parents('#entries').find('li.active');
    activeEntry.find('div').fadeOut(300);
    activeEntry.removeClass('active');

    $li.find('div').fadeIn(300);
    $li.addClass('active');
  });

  $entries.eq(randomNumber).click();
});

Answer 2

这是一个非常简单的例子，但应该会给你想要的结果：-

$('#entries li').click(function() {

  // remove active class and fade div out from all list elements
  $('#entries li').removeClass('active');
  $('#entries div').fadeOut();

  // add active class to the clicked element and fade the div in
  $(this).addClass('active');
  $('div', this).fadeIn();    

});

// generate a random number ranging between 0 and the number of available li's
var random = Math.floor(Math.random() * $('#entries li').length);

// trigger the click event on the random element
$('#entries li').eq(random).trigger('click');

这是一个小提琴