jQuery UIのtabs()を使うと変な要素が読み込まれます

jQuery UIのtabsメソッドを使ってdivのタブ化をしたいのですが、

HTML
1<div id="tabs_box">
2   <ui>
3      <li><a href="#tab1">タブ1</a></li>
4      <li><a href="#tab2">タブ2</a></li>
5   </ui>
6   <div id="tab1">
7      <p>タブ1の文章</p>
8   </div>
9   <div id="tab2">
10      <p>タブ2の文章</p>
11   </div>
12</div>

JavaScript
1$("#tabs_box").tabs();

こうすると、なぜかHTML全体が#tabs_boxの中に２つ読み込まれ、

HTML
1<div id="tabs_box" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
2   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
3      <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="ui-id-2" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true"><a href="#all" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">タブ1</a></li>
4      <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-id-4" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false"><a href="#top" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">タブ2</a></li>
5   </ul>
6   <div id="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false" style="display: block;">
7      《<head>の中身》
8      《<body>の中身》
9   </div>
10   <div id="ui-id-4" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-live="polite" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="false" style="display: block;">
11      《<head>の中身》
12      《<body>の中身》
13   </div>
14   <div id="tab1">
15      <p>タブ1の文章</p>
16   </div>
17   <div id="tab2">
18      <p>タブ2の文章</p>
19   </div>
20</div>

というふうになってしまいます。ちなみに、index.htmlでファイル名を指定しなかった場合(http://example.com/index.htmlではなく、http://example.com/にアクセスした場合)はこのような事になりません。
同じようなバグ（？）にあたったことがある方がいれば解決策を教えてもらえると幸いです。

行動規範の内容に同意します

回答1件

とりあえず、元のコードがulタグではなく、uiタグになっていますね。
それを直してみたらどうなるでしょうか？

html
1 <ui>
2    <li><a href="#tab1">タブ1</a></li>
3    <li><a href="#tab2">タブ2</a></li>
4 </ui>
5↓
6<ul>
7      <li><a href="#tab1">タブ1</a></li>
8      <li><a href="#tab2">タブ2</a></li>
9</ul>
10

投稿2016/02/04 14:24

yamato_hikawa

総合スコア2092

退会済みユーザー

2016/02/04 21:55

あ、すみません。打ち間違えました。僕を悩ませているプログラムはulタグになっているので、多分それは違うと思います。

yamato_hikawa

2016/02/05 00:11 編集

jqueryとjquery UIのバージョンはなんでしょうか？両方ともバージョン1.10にするとどうでしょうか。また、tabsの実行は下記の形式でしょうか？ $(function(){ $("#tabs_box").tabs(); });

yamato_hikawa

2016/02/05 01:28

こちらで試した所、下記の組み合わせでは問題ありませんでした、 // jQuery読み込み <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> // jQueryUI読み込み <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> // 実行 <script> $(function(){ $("#tabs_box").tabs(); }); </script>

行動規範の内容に同意します