mochiflappe
7/18/2014 - 2:02 PM

ページロード後ランダムにカレントタブを切り替えるjQuery

ページロード後ランダムにカレントタブを切り替えるjQuery

<ul class="tabs">
  <li><a href="#tab1"></a></li>
  <li><a href="#tab2"></a></li>
  <li><a href="#tab3"></a></li>
</ul>
<div class="tabs-content">
  <div id="tab1"></div>
  <div id="tab2"></div>
  <div id="tab3"></div>
</div>
$(function () {
  var tabMenu = $('.tabs').children('li');
  var tabContent = $('.tabs-content').find('.content');
  var activeClass = 'tab_active';

  var randomNum = Math.floor(Math.random() * tabMenu.length);

  tabContent.eq(randomNum).show();
  tabMenu.eq(randomNum).addClass(activeClass);

  tabMenu.click(function () {
    tabMenu.removeClass(activeClass);
    $(this).addClass(activeClass);
    tabContent.hide();

    $($(this).find('a').attr('href')).show();
    return false;
  });
});