0

jquery-ui のデフォルト タブを実装しましたが、クライアントから戻ってきて、最初にページに到達したときに、タブ自体とは別のホームページ メッセージが存在することを要求されました。説明するために...関連するコンテンツを持つ 5 つの対応する div を持つ 5 つのタブがあります。初期化時に表示されるコンテンツの別の div を追加する必要があり、タブが選択されると、タブが消えてアクセスできなくなります。li 要素はすべて対応する div を必要とします。余分な li を display:none に設定しようとすると、jquery の初期化によってそれが削除されます...これに対する簡単な解決策はありますか、それともカスタム コードを作成する必要がありますか?これ？

 $(document).ready(function () {
            $(".tabs").tabs({ event: "mouseover", fx: { opacity: 'toggle', duration: 'fast' }
            });
        });

追加した

 $(document).ready(function(){
        $("#blank").remove();});

html

    <div class="tabs">
<ul>
      <li id="blank" class="tabsm"><a href="#keytab-x" style="display: none"></a></li>
      <li class="tabsm"><a href="#keytab-1"tab1</a></li>
      <li class="tabsm"><a href="#keytab-2">tab2t</a></li>
      <li class="tabsm"><a href="#keytab-3">tab3</a></li>
      <li class="tabsm"><a href="#keytab-4">tab4</a></li>
      <li class="tabsm"><a href="#keytab-5">tab5</a></li>
</ul>}
 <div id="keytab-x">
                    <h2>
                        this is the default</h2>
                    <p>
                        </p>
                </div>
    <div id="keytab-1">
                    <h2>
                        this is tab 1</h2>
                    <p>
                        </p>
                </div>
    <div id="keytab-2">
                    <h2>
                        this is the tab 2</h2>
                    <p>
                        </p>
                </div>
    <div id="keytab-3">
                    <h2>
                        this is the tab 3</h2>
                    <p>
                        </p>
                </div>
</div>
etc..
4

1 に答える 1

0

わかった、

前述のように、削除を使用します。

$('#tabs').tabs('remove', 2);

または、x時間後またはタブが操作されたときにDOMで削除/非表示になるタブの上にレ​​イヤーを配置します。

タブをオーバーレイする広告ブロックのためにこれを 1 回行いました。

次のような構造にすることができます。

<div id="tabs">
    <ul>
        <li>
            <a href='#tabs1">tab 1</a>
        </li>
         <li>
            <a href='#tabs2">tab 2</a>
        </li>
    </ul>
    <div id="tabs1"> my tab1 content</div>
    <div id="tabs2"> my tab2 content </div>
    <div id="myOverlay"> my overlay content </div>
</div> <!-- end tabs -->

jQuery UI タブの仕組みでは、ul のハッシュと一致する ID を持つ div のみが「タブ」の一部と見なされます。その他の div は通常の div としてレンダリングされます。したがって、オーバーレイを絶対に配置する css と、それを非表示にするための jquery (私が行ったときはスライドダウンを使用しました) があれば、準備は完了です。

于 2012-09-28T17:48:48.550 に答える