[EC-CUBE] 　2.12.1
[レンタルサーバ] さくらインターネット
[OS]　
[PHP] PHP 5.2.17
[データベース] MySQL
[WEBサーバ]　Apache
[ブラウザ] chrome,safari
[現象]
jqueryのuiタブを使用し、トップページにタブを設置しようと思っているのですが、色々試してみたのですが、うまくいきません。
どなたがご教授頂けると大変助かります。

自分が試した方法です。
まず
html/jsのディレクトリにjquery.js、jquery.ui.core.js、jquery.ui.tabs.js、jquery.ui.widget.jsのそれぞれのファイルを設置。

html/user_data/css/内にダウンロードしたthemeフォルダを設置。

その後data/Smarty/templates/default/site_frame.tplでそれぞれのファイルを読み込む
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.js"></script>
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.ui.core.js"></script>
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.ui.tabs.js"></script>
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.ui.widget.js"></script>

<link rel="stylesheet" href="<!--{$smarty.const.ROOT_URLPATH}-->css/theme/base/jquery.ui.all.css"　type="text/css" media="all" />
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs();
});
</script>



html内の記述
<div id="ui-tab">
<ul>
<li><a href="#fragment-1"><span>タブ1</span></a></li>
<li><a href="#fragment-2"><span>タブ2</span></a></li>
<li><a href="#fragment-3"><span>タブ3</span></a></li>
</ul>

<div id="fragment-1">
<p>タブ1の内容</p>
</div>

<div id="fragment-2">
<p>タブ2の内容</p>
</div>

<div id="fragment-3">
<p>タブ3の内容</p>
</div>

</div>
どこが間違っているのでしょうか？？
お手数ですがよろしくお願い致します。