Question

我在JS Bin中有一个演示。

我想要做的很简单，我希望能够点击一个li并给它一个活动类并让子div淡入。所有这些都会反过来发生在前一个活动中如果可能的话，同时也是李。

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

乙

Answer 1

看看this它应该做你想做的事。

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

这是fiddle

在页面加载时将活动状态更改为随机<li> </li>

2 个答案: