jQuery: случайная активная вкладка?

Question

Мне нужно иметь интерфейс вкладок, в котором каждый раз при загрузке страницы появляется другая «активная» вкладка. На каждой из 4 вкладок будет размещаться содержание рекламодателя, так что это способ сохранить честность. Я знаком с частью вкладок ... просто нужно указывать в правильном направлении, получая различные "активные" вкладки для отображения при загрузке страницы. Спасибо!

Answer 1

ВЕЛИКИЙ!Я получил это до 3 строк!Спасибо @Bryan Denny и @GeReV!

JS / jQuery Код:

    // Count the number of tabs
    var countTabs = $('.tab_randomiza').children().size(); 

    // Find a random number between 0 and the number of tabs (countTabs)
    var randomizeIt = Math.floor(Math.random()*(countTabs));

    // Tell the tabs which one to be active
    $('#randomiza_wrapper').tabs({ selected: randomizeIt });

HTML:

    <div class="titlebar titlebar_secondary">
        <h3>Test Bucket</h3>
    </div><!-- end .titlebar_secondary -->
    <div id="randomiza_wrapper">
        <ul class="tab_header tab_randomiza">
            <li class="randomiza-tab1 ui-tabs-selected"><a href="#one">one</a></li>
            <li class="randomiza-tab2"><a href="#two">two</a></li>
            <li class="randomiza-tab3"><a href="#three">three</a></li>
            <li class="randomiza-tab4"><a href="#four">four</a></li>
        </ul>

        <div id="one" class="bucket_secondary randomiza_bucket1">
             <ul class="story_list sidebar_story_list">
                <li>
                    Content One
                </li>
            </ul>

        </div><!-- end #one -->


        <div id="two" class="bucket_secondary preventFOUC randomiza_bucket2">
            <ul class="story_list sidebar_story_list ">
                <li>
                    Content Two
                </li>
            </ul>
        </div><!-- end #two -->

        <div id="three" class="bucket_secondary preventFOUC randomiza_bucket3">
            <ul class="story_list sidebar_story_list ">
                <li>
                    Content Three
                </li>
            </ul>
        </div><!-- end #three -->

        <div id="four" class="bucket_secondary preventFOUC randomiza_bucket4">
            <ul class="story_list sidebar_story_list ">
                <li>
                    Content Four
                </li>
            </ul>
        </div><!-- end #four -->
    </div>

</div><!-- end #top_jobs -->

Answer 2

Просто используйте случайный объект JavaScript.

var randomnumber=Math.floor(Math.random()*3) //0-3

Затем установите идентификатор каждой вкладки на основе этого случайного числа. Так, если случайное число генерирует 1, то показать вкладку 2 в качестве активной вкладки.

Answer 3

Используя ответ Брайана Денни, вот мой почти окончательный код:

// Make sure none of the tabs are active
$('.randomiza-tab1').removeClass('ui-tabs-selected');
$('.randomiza-tab2').removeClass('ui-tabs-selected');
$('.randomiza-tab3').removeClass('ui-tabs-selected');
$('.randomiza-tab4').removeClass('ui-tabs-selected');

// Make sure none of the content is active
$('.randomiza-bucket1').addClass('ui-tabs-hide');
$('.randomiza-bucket2').addClass('ui-tabs-hide');
$('.randomiza-bucket3').addClass('ui-tabs-hide');
$('.randomiza-bucket4').addClass('ui-tabs-hide');   


// Find a random number between 0 and 3
var randomnumber=Math.floor(Math.random()*4);

// Add and remove the correct style classes based on random number
switch (randomnumber) {
    case 0 :
        $('.randomiza-tab1').removeClass('hidden').addClass('ui-tabs-selected');
        $('.randomiza-bucket1').removeClass('ui-tabs-hide');            
        break;

    case 1 :
        $('.randomiza-tab2').removeClass('hidden').addClass('ui-tabs-selected');
        $('.randomiza-bucket2').removeClass('ui-tabs-hide');            
        break;

    case 2 :
        $('.randomiza-tab3').removeClass('hidden').addClass('ui-tabs-selected');
        $('.randomiza-bucket3').removeClass('ui-tabs-hide');            
        break;

    case 3 :
        $('.randomiza-tab4').removeClass('hidden').addClass('ui-tabs-selected');
        $('.randomiza-bucket4').removeClass('ui-tabs-hide');            
        break;

    default :
        $('.randomiza-tab1').removeClass('hidden').addClass('ui-tabs-selected');
        $('.randomiza-bucket1').removeClass('ui-tabs-hide');            
}

Answer 4

Вы можете позволить серверу, который генерирует фактическое содержимое, добавить «выбранную по умолчанию» на вкладку в отображаемом выводе HTML.

Answer 5

Пока не знаком с вкладками, но вы можете сосчитать элементы из Javascript, а затем выбрать один элемент случайным образом, используя Javascript

var randomnumber=Math.floor(Math.random()*tabCount);

, а затем использовать случайный номер в качестве "индекса вкладки".