0

私は次のhtmlを持っています、jqueryを使ってシンプルなタブを作りたいです

<td style="border-color: black; border-style: solid; border-width: 1px 0 1px 1px;">
    <div id="cont-1-1">
        My first tab content
    </div>
    <div id="cont-2-1">
        My second tab content
    </div>
</td>
<td style="width: 30px">
    <div id="tab-box">
    <div style="height: 121px;"><img class="cont-1-1" src="/Images/Tab1.png" /></div>
    <div style="border-left: 1px solid Black;"><img class="cont-2-1" src="/Images/Tab2.png" /></div>
    <div style="border-left: 1px solid Black; height: 40px;"></div>
    </div>
</td>
</td>

タブ ヘッダーとタブ コンテンツはどこTab1.Pngにありますか。これには jquery プラグインを使用したくありません。タブをクリックしたときに簡単なものが必要なだけです。Tab2.Pngdiv id :cont-1-1 and 2-1

これは私がしようとしているものです:

$(document).ready(function () {
                $('#tab-box').each(function () {
                    // For each set of tabs, we want to keep track of
                    // which tab is active and it's associated content
                    var $active, $content, $links = $(this).find('img');

                    // If the location.hash matches one of the links, use that as the active tab.
                    // If no match is found, use the first link as the initial active tab.
                    $active = $(Find First Tab from div);
                    $active.addClass('active');
                    $content = $($active.attr('class'));

                    // Hide the remaining content
                    $links.not($active).each(function () {
                        $($(this).attr('href')).hide();
                    });

ありがとう

4

2 に答える 2

0

これを (JavaScript/jQuery のみで) 行う最善の方法は、「タブ」を div (またはスパンなど) でラップし、すべての css 表示を none に設定することです (デフォルトの最初のタブを除く)。次に、クリックすると、必要に応じて非表示/表示します。

ブラウザ間の互換性を持たせるには少し余分に (ほんの数行) かかりますが、私はこれを複数回行っています。

この例では、id pic1 を持つ要素が「クリック」されている「タブ」であり、他に 3 つのタブ (pic2、pic3、および pic4) があると想定しています。ページの設定方法 (矢印を使用するか、強調表示されていないタブをクリックして突き出すなど) に応じて、必要な各 .click 関数にこれらのコマンドを配置します (それぞれ、必要なページを非表示および表示します)。

$(document).ready(function (){
$("#pic1").click(function (){
    $("#pic1").prop("hidden", false);
    $("#pic2").prop("hidden", true);
    $("#pic3").prop("hidden", true);
    $("#pic4").prop("hidden", true);
    $("#pic1").css("display", "inline");  //if using div, use display block instead
    $("#pic1").css("display", "normal");
    $("#pic2").css("display", "none");
    $("#pic3").css("display", "none");
    $("#pic4").css("display", "none");
});
});

なぜそれほど冗長にする必要があるのか​​ わかりません（「hidden」と .css("display", none) の両方を使用し、display を要素の通常表示と自然表示の両方に設定する）などですが、すべてを使用せずにIE で動作しないか、FireFox で動作しないか、またはその両方です。

また、「インライン」や「ブロック」、または再表示される要素のデフォルト表示の代わりに「初期」表示を使用できると思うかもしれませんが、私自身はそのように動作させることはできませんでした。

于 2012-11-16T17:10:07.500 に答える
0

jQueryUI タブの使用について

開発しているものが将来変更される可能性が低く、それほど複雑になることはないことが本当にわかっている場合は、自分でタブを作成しても問題ありません。

それ以外の場合は、将来必要になる可能性のある拡張性を提供する堅牢なライブラリを使用しないでください。

于 2012-11-16T17:15:41.857 に答える