私はほとんどのプログラミングの初心者なので、無知を許してください。
JQueryタブ内でJQueryアコーディオンを使用しています。このページはFirefoxv12とIEv9で正常に動作しますが、Chrome / Iron v12では機能しません。具体的には、クラブ名をクリックしてクラブの統計を取得すると、タブが垂直に表示され、アコーディオンが混乱します。
ページは次のとおりです。http ://www.footballfanweb.com/ffwfootballstats/getclubs
「プレミアリーグ」をクリックしてからクラブ名をクリックすると、サイトは下部のタブ領域にいくつかの統計を配信します。
私は最初にこれを使用してロードします:
$(document).ready(function() {
$("#accordion").accordion({
collapsible: true,
active: 4
});
$(function() {
$( "#tabs" ).tabs();
});
// Populate the accordion with football teams for each of the divisions
$.ajaxCall('myajaxclass.listclubs','div_id=1');
$.ajaxCall('myajaxclass.listclubs','div_id=2');
$.ajaxCall('myajaxclass.listclubs','div_id=3');
$.ajaxCall('myajaxclass.listclubs','div_id=4');
}); /* end document ready */
上記のajax呼び出しは、パネルにサッカーチームの名前を入力し、次のようなリンクのリストとして書き込みます。
while($row=mysql_fetch_assoc($result)){
$club = $row['club_name'];
$divstring.='<li title=\"' . $club . '\"><a href=\"#\" >' . $club . '</a></li>';
}
これにより、クラブのリストが作成されます。
ajax呼び出しを使用して統計を取得し、次に下部のアコーディオンをアクティブにして、統計が次のように表示されるようにします。
$("li[title]").live('click', function() {
var selectedclub = $(this).attr('title');
$.ajaxCall('myajxclass.getclubinfo', 'theclub=' + selectedclub );
$.ajaxCall('myajxclass.statssum','theclub=' + selectedclub );
$("#accordion").accordion( 'activate' , 4);
$(function() {
$( "#tabs" ).tabs();
});
});
私はこの問題の周りにたくさんのスレッドを検索しました。1つの提案は、ajax呼び出しから戻ったときにtabs関数を呼び出すことでした。私はさまざまなアプローチを試しました、例えば
$('#tabs').tabs('select', 0); // zero-based, i.e. 1 = tab 2
$("#accordion").accordion( 'activate' , 4);
$('#tabs').tabs('select', 0);
しかし問題を解決しませんでした:(
htmlは次のようになります。
<div id="tabs">
<ul>
<li> flag image 1</li>
<li> flag image 2</li>
...
</ul>
<div id="tabs-1">
<div id="accordion">
// data etc in here.
</div>
</div>
<div id="tabs-2">
<p> Italy ... Coming soon</p>
</div>
....
</div>
Chromeで無効なHTMLに問題があるのではないかと思ったので、w3.orgバリデーターでページを検証しましたが、重要ではない、関連のない2つのエラーがあります。
「必須属性「alt」が指定されていません」「属性「target」がありません」
FFfirebugにはエラーはありません。
誰か提案はありますか?
フィードバックをありがとう!
トニー