Странная проблема. Я посмотрел на несколько похожих вопросов. Ни один из их ответов не решил мою проблему.
Он делает все правильно, но вместо того, чтобы вкладки становились интерактивными, как они предназначены, они просто все показывают.
Я пропускаю как можно больше ненужного кода, включая мой декоративный CSS.
Не стесняйтесь спрашивать меня о дополнительной информации. Спасибо за просмотр.
Вот мой заголовочный файл:
<link rel="stylesheet" type="text/css" href="/Include/styleSheetV2.css"/>
<link rel="stylesheet" type="text/css" href="/Include/StyleSheet.CSS"/>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet"/>
<script type="text/javascript" src="https://www.google.com/jsapi?key=(Removed key for StackOverflow)"></script>
<script type="text/javascript" src="/JSFunctions.js"></script>
<script type="text/javascript">
google.load("jquery", "1.6.4");
google.load("jqueryui", "1.8.16");
</script>
Это HTML-код
<div id="prof_div" class="sG_tabber">
<ul class="sG_tabberNav">
<li><a href="#prof_home">Profile Home</a></li>
<li><a href="#prof_details">Details</a></li>
<li><a href="#prof_settings">Settings</a></li>
</ul>
<div id="prof_home" class="sG_tabberTab">
1
</div>
<div id="prof_details" class="sG_tabberTab">
2
</div>
<div id="prof_settings" class="sG_tabberTab">
3
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#prof_div > ul').tabs({
fx: { height: 'toggle', opacity: 'toggle' }
});
});
</script>
А вот мой код CSS (только необходимый бит)
.ui-tabs-hide {
display: none;
}