Question

我需要有一个标签界面，每次页面加载时都有一个不同的“活动”标签。 4个标签中的每一个都会有广告客户内容，因此这是一种让事情“公平”的方法。我熟悉标签部分...只需指向正确的方向，在页面加载时显示不同的“活动”标签。谢谢！

Answer 1

只需使用javascript随机对象。

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

然后将每个标签的id设置为基于该随机数。因此，如果随机数生成1，则将选项卡2显示为活动选项卡。

Answer 2

GREAT！我把它降到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 3

还不熟悉标签，但你可以从Javascript中计算项目，然后使用Javascript随机选择一个项目

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

然后使用randomnumber作为“tab index”。

Answer 4

您可以让生成实际内容的SERVER为呈现的HTML输出中的选项卡添加“选定的默认值”。

Answer 5

使用Bryan Denny的答案，这是我的几乎最终代码：

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

jQuery：随机活动标签？

5 个答案: