Как спрятать лишнее содержимое вкладок таба при загрузке страницы?

Question

[Roman-Belgorod]

Маленько могу ошибаться с правильностью вопроса, но суть следущая:

При загрузке страницы выводиться содержимое всех вкладок таба и это очень не хорошо, причем последующие переходы по вкладкам работают отлично, лишнее содержимое скрывается в display:none. Нужна лишь 1 активная вкладка с содержимым при загрузке страницы.



HTML

<select id="test">
 <option value="0">Первая</option>
 <option value="1">Вторая</option>
 <option value="2">Третья</option>
 <option value="3">Четвертая</option>
</select>

<div id="test_hide0" class="tab_select">Первое содержимое</div>
<div id="test_hide1" class="tab_select ">Второе содержимое</div>
<div id="test_hide2" class="tab_select">Третье содержимое</div>
<div id="test_hide3" class="tab_select">Четвертое содержимое</div>

JAVASCRIPT

$(window).load(function(){
$('#test').change(function() {
 value = $(this).find('option:selected').val();
   
 $('div[id^="test_hide"]').hide();
 $('#test_hide'+value).show();
});
});

А в целом хотелось-бы посмотреть примеры табов с выпадающим списком и переходом по клику на содержимое, как здесь. Только с плавными переходами на Query. Сколько не искал ничего нет, если кто знает просьба показать. Спасибо

Answer 1

[Евгений Колегов]

По первой части вопроса: дело в том что в скрипте вы только привязываете функцию к событию, но это событие не срабатывает само по себе при загрузке страницы. Для решения, например, можно вызвать событие самому:

$(window).load(function(){
	$('#test').change(function() {
		var value = $(this).find('option:selected').val();
		$('div[id^="test_hide"]').hide();
		$('#test_hide'+value).show();
	});

	$('#test').change();
});

Еще же есть вторая часть вопроса: немного не понятен подход, почему это вкладки? Если это вкладки, то почему переключение через select? А вообще решений для вкладок на jQuery довольно много, также есть jQuery UI.

Comments

[Roman-Belgorod]

Оказывается все просто, но я не силен в скриптах.... приходится обращаться к Вам. Спасибо. Я отмечу ваш ответ решением, только немножко позже, хотелось-бы еще комментариев.

[Roman-Belgorod]

Select только для выпадающего списка. Именно такой вариант нужен. Вот нет нигде примеров, не видел.