奇妙な問題。私はいくつかの同様の質問を見てきました-彼らの答えのどれも私の問題を解決しませんでした。
それはすべてのことを正しく行っていますが、意図したようにタブがインタラクティブになるのではなく、すべてが表示されます.
装飾的な 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;
}