(JQuery UI) Все содержимое отображается сразу

Question

У меня есть JQuery и JQuery UI, которые установлены отлично, и оба они работают нормально, но когда я пытаюсь использовать функцию вкладок в пользовательском интерфейсе JQuery, я получаю сразу весь контент.

Я прочитал документацию по адресу http://api.jqueryui.com/tabs/ , поэтому я знаю, что использую правильные коды, чтобы это произошло.
Это мой HTML:
<div id="tab"> <ul> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div id="tab1"> <p>This is the content of tab 1.</p> </div> <div id="tab2"> <p>Something for tab 2 goes here.</p> </div> <div id="tab3"> <p>The content of tab 3 shows up here.</p> </div> </div>

И это мой код для его запуска:
$(function() { $('#tab').tabs(); });

Единственная проблема заключается в том, что все DIV-х обнаруживаются все в то же время. Ниже приведена фотография того, что появляется.
http://derpcast.net/snap/pic18-07-14.png
Вы можете легко щелкнуть вкладки, но это не изменит то, что отображается в поле. Может кто-нибудь помочь, почему вкладки не отображаются правильно.

Если никто не может мне помочь, я могу сделать это вручную, но я просто хочу, чтобы вкладки работали.

Answer 1

Возможно, вам не хватает необходимых библиотек jquery и связанных с ними CSS. Ваш код работает нормально.

см, [http://jsfiddle.net/cfs69yxf/]