Question

我是jQuery的新手，并设法创建一个包含4个部分的选项卡式界面。页面加载时，第1部分的选项卡内容显示，用户可以单击其他链接以显示其他部分。换句话说，选项卡1始终是第一个“活动”。但是，我希望每次加载页面时都有一个随机的“活动”选项卡，这样其他部分也可以随机“活动”。一旦页面加载随机活动选项卡，用户就可以单击以查看其他部分。

我真诚地感谢有关如何做到这一点的任何见解。非常感谢你

<body>

<div id="tabs">

<ul>
<li><a href="#1">Tab One</a></li>
<li><a href="#2">Tab Two</a></li>
<li><a href="#3">Tab Three</a></li>
<li><a href="#4">Tab Four</a></li>
</ul>

<div id="1">
<h3>Tab 1</h3>
<p>Some content</p>
</div>
<div id="2">
<h3>Tab 2</h3>
<p>Some content</p>
</div>
<div id="3">
<h3>Tab 3</h3>
<p>Some content</p>
</div>
<div id="4">
<h3>Tab 4</h3>
<p>Some content</p>
</div>

</div> <!-- end tabs -->


<script type="text/javascript">
$(document).ready(function(){

$('#tabs div').hide(); // Hide all divs
$('#tabs div:first').show(); // Show the first div
$('#tabs ul li:first').addClass('active'); // Set the class of the first link to active
$('#tabs ul li a').click(function(){ //When any link is clicked
$('#tabs ul li').removeClass('active'); // Remove active class from all links
$(this).parent().addClass('active'); //Set clicked link class to active
var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link
$('#tabs div').hide(); // Hide all divs
$(currentTab).show(); // Show div with id equal to variable currentTab
return false;
});
});
</script>

</body>

Answer 1

var $tabs = $('#tabs div');

$tabs.hide();

var index = Math.floor($tabs.length * Math.random());

$tabs.eq(index).show();

这可以稍微浓缩一下，我已经把它展开，以便更容易理解。我选择一个介于0和标签数量-1之间的随机数。然后使用eq过滤到该编号元素。

http://jsfiddle.net/tnP3R/

Answer 2

您可以使用Math.random()生成随机数并调用jQuery UI标签 - ＆gt;选择方法来设置所需的选项卡。

var random_tab_index = Math.floor(Math.random()* $(tabSelector).tabs("length")); //will generate random number between 0 and 5

然后调用jQuery UI选项卡选择函数，如下所示，

$(tabSelector).tabs( "select" , random_tab_index)

DEMO 此处

制作随机活动标签？

2 个答案: