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の中に2つ読み込まれ、
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/にアクセスした場合)はこのような事になりません。
同じようなバグ(?)にあたったことがある方がいれば解決策を教えてもらえると幸いです。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/02/04 21:55
2016/02/05 00:11 編集
2016/02/05 01:28