1

このトピックは以前に質問されたことがあることは知っていますが、投稿を確認することは私が探しているものではないので、しばらくお待ちください。

最初に私の小さなjQueryがあります（完璧に動作します）

$(document).ready(function(){
    $(".tabs li").click(function() {
        $(".tab-content").hide();
        var selected_tab = $(this).find("a").attr("href");
        $(selected_tab).fadeIn();
        $(".tabs li").removeClass('current');
        $(this).addClass("current");
        return false;
    });
});

そして私の基本的なHTML

<ul class="tabs">
    <li class="active"><a href="#tab4">Tab 4</a></li>
    <li><a href="#tab5"><div class="alert-icon">Tab 5</div></a></li>
    <li><a href="#tab6"><div class="printer-icon">Tab 6</div></a></li>
</ul>

 <div id="tab4" class="tab-content">Tab 4</div>
 <div id="tab5" class="tab-content">Tab 5 </div>
 <div id="tab6" class="tab-content">Tab 6 </div>

当然、ページに複数のタブセクションを配置すると、タブがクリックされるたびにすべてのタブのコンテンツが「非表示」になり、各タブセクションを個別に動作させる必要があります。

私の問題は、IDルートを避けたいということです。理想的には、JSをテンプレートに直接配置でき、タブ付き領域が必要になるたびに、HTMLを貼り付け、ULにIDを追加して、空白を埋めることができます。

タブとそのコンテンツは、他のあまり厄介ではない人々によって入れられるので、JSを使用しないようにすることができれば、人生は素晴らしいでしょう！

フィルター、文字列の置換、子要素（LIにdivを配置しますか？）などで遊ぶことを考えましたが、アヒルのフロートなしでなじみのない海に飛び込む前に、ここのプロの1人がヒントを与えて私を指すことができると思いました正しい方向。js/jQueryは私のお気に入りではありませんでした^^。

どうもありがとう！

4

1 に答える 1

3

これでうまくいくはずです：http：//jsfiddle.net/BLGUW/

HTML：

<div class="tabs">
        <ul>
            <li class="active"><a href="#tab4">Tab 4</a></li>
        <li><a href="#tab5"><div class="alert-icon">Tab 5</div></a></li>
        <li><a href="#tab6"><div class="printer-icon">Tab 6</div></a></li>
    </ul>
    <div id="tab4" class="tab-content">Tab 4</div>
    <div id="tab5" class="tab-content">Tab 5 </div>
    <div id="tab6" class="tab-content">Tab 6 </div>
</div>

<div class="tabs">
    <ul>
    <li class="active"><a href="#tab40">Tab 4</a></li>
    <li><a href="#tab50"><div class="alert-icon">Tab 5</div></a></li>
    <li><a href="#tab60"><div class="printer-icon">Tab 6</div></a></li>
    </ul>
    <div id="tab40" class="tab-content">Tab 4</div>
    <div id="tab50" class="tab-content">Tab 5 </div>
    <div id="tab60" class="tab-content">Tab 6 </div>
</div>

JS

$(document).ready(function(){
    $(".tabs li").click(function() {
        $(this).parent().parent().find(".tab-content").hide();
        var selected_tab = $(this).find("a").attr("href");
        $(selected_tab).fadeIn();
        $(this).parent().find("li").removeClass('current');
        $(this).addClass("current");
        return false;
    });
});

これは最適化できると確信しています;）

于 2013-02-12T16:27:36.060 に答える