Создание случайной активной вкладки? - PullRequest
Новая
       6

Создание случайной активной вкладки?

1 голос
/ 04 января 2012

Я новичок в 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>

Ответы [ 2 ]

1 голос
/ 04 января 2012

Вы можете сгенерировать случайное число с помощью Math.random() и вызвать вкладки jQuery UI -> метод выбора, чтобы установить нужную вкладку. 

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)

ДЕМО здесь

1 голос
/ 04 января 2012 
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/

...