タブを動的に追加する Web ページにタブのウィジェットがあり、タブを削除しようとしていますが、以前のタブがアクティブであっても表示できません。それぞれの div は表示されません。
私が使用しているコードは次のとおりです。
tabs.delegate("span.ui-icon-close", "click", function () {
var panelId = $(this).closest("li").remove().attr("aria-controls");
$("#" + panelId).remove();
tabs.tabs("refresh");
});
これは正常に動作する必要がありますが、動作しませんでした
そのため、上記の関数に以下のコード行を追加して、自分の div を表示しようとしました。
$(
$(this).closest("li").prev("li").children("a").attr("href")
)
.attr("aria-expanded", true)
.attr("aria-hidden", false)
.css("display", "block");
コード行をデバッグすると、div が強制的に表示されます。プラグイン ファイルのどこかで関数を抜けた後、div 設定が変更されて表示されなくなります。
HTML:
<div id="dynamicTabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all" style="width:960px;">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-1" aria-labelledby="ui-id-13" aria-selected="false">
<a id="ui-id-13" class="ui-tabs-anchor" href="#tabs-1" role="presentation" tabindex="-1">Add</a>
</li>
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-2" aria-labelledby="ui-id-18" aria-selected="true">
<a id="ui-id-18" class="ui-tabs-anchor" href="#tabs-2" role="presentation" tabindex="-1">dfbgbb</a>
<span class="ui-icon-close">X</span>
</li>
</ul>
<div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="ui-id-13" role="tabpanel" style="display: none;" aria-expanded="false" aria-hidden="true">Tab 1 content.</div>
<div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom selected" aria-expanded="true" aria-hidden="false" style="display: block;" aria-labelledby="ui-id-18" role="tabpanel">cvxbxcvxcvxcv</div>
</div>
スクリプトに問題があるのではないかと思いますが、何が原因かわかりません。誰かが同じ問題を抱えていましたか、それとも回避策を知っていますか?