1

こんにちは、jquery を使用してタブを作成しました。タブ メニューにデフォルト セットを追加することなく、ほとんどすべてが完了しました。.showタブメニューの最初のコンテンツを表示するクラスを作成します。他のボタンをクリックするthe show class removed from the default first menuと、現在のタブとalso other tabbed menu in my page.

ここで私の作業フィドルは、このケースの明確な問題を示しています

そして私のマークアップは

<div class="tabs">
    <ul class="tabheader">
        <li class="active" > 
            <a href="#tab-1"><span>FAQs</span></a>
         </li>
    </ul>
    <div id="tab-1" class="tabed_contents show">
       adasdasd
    </div>
</div>       


<div class="tabs">
    <ul class="tabheader">
        <li class="active" > 
            <a href="#tab-2"><span>FAQs</span></a>
         </li>
    </ul>
    <div id="tab-2" class="tabed_contents show">
       adasdasd
    </div>
</div>

私のjq

     $('.tabs > ul.tabheader > li > a').on('click', function(event) {
    event.preventDefault();
    $('.tabed_contents').hide();
    var href = $(this).attr('href');
    $(href).show();
    $('.tabs > ul.tabheader > li').removeClass('active');
    $(this).closest('.tabed_contents').removeClass('show');
    $(this).closest('li').addClass('active');
})

すべてのタブの最初のナビゲーションに使用されるクラスを表示し、他のメニューをクリックした後にデフォルト ビュー (表示) として設定します。クラスを実行するshowと、他のクラスも削除されます。そのフィドルは問題を明確に示しています。

.show{
    display: block !important;
}

この問題を防ぐにはどうすればよいですか (デフォルトの show クラスを削除します)。

4

1 に答える 1

0

では、最初のメニューを操作すると、2 番目のメニューの外観が変更されます。このタブブラウザを機能させたいインスタンスごとに、異なる機能を設定する必要があります。

CSS

.show{} 
<!-- Remove styling from show.  It is just used strictly for jQuery selectors. -->

HTML

<div class="tabs first">
  <ul class="tabheader">
    <li class="active" ><a href="#fragment-1"><span>FAQs</span></a></li>
    <li><a href="#fragment-2"><span>Credit bundle</span></a></li>
    <li><a href="#fragment-3"><span>Delivery & turnaround times</span></a></li>
    <li><a href="#fragment-4"><span>Testimonials</span></a></li>

  </ul>
  <div class="clearfix"></div>
  <div id="fragment-1" class="tabed_contents current">adasdasd</div>
  <div id="fragment-2" class="tabed_contents">adasdasd</div>
  <div id="fragment-3" class="tabed_contents">adasdasd</div>
  <div id="fragment-4" class="tabed_contents">adasdasd</div>
</div>
<div class="tabs second">
  <ul class="tabheader">
    <li class="active"><a href="#fragment-8"><span>Ask a question</span></a></li>
    <li><a href="#fragment-9"><span>Live chat support</span></a></li>
  </ul>
  <div class="clearfix"></div>
  <div id="fragment-8" class="ask_ques tabed_contents show">
    <p>Let our support team answer your questions...</p>
    <form class="ask_frm">
        <div class="row">
            <label>Name: </label>
            <input type="text" name="name2">
        </div>  
        <div class="row">
            <label>Email: </label>
            <input type="text" name="emaild2">
        </div>  
        <div class="row">
            <label>Questions: </label>
            <textarea></textarea>
        </div>
        <div class="row">
            <button class="btn blue small">Send</button>    
        </div>
    </form>
  </div>
    <div id="fragment-9" class="liv_c tabed_contents">
        <div class="row">
            <span class="live_chats"></span>
            <a href="">Chat with our customer support</a>
        </div>
    </div>
</div>

jQuery

$('.tabs-first > ul.tabheader > li > a').on('click', function(event) {
    event.preventDefault();
    $('.tabed_contents').hide();
    var href = $(this).attr('href');
    $(href).show();
    $('.tabs > ul.tabheader > li').removeClass('active');
    $(this).closest('.tabed_contents').removeClass('show');
    $(this).closest('li').addClass('active');
})

$('.tabs-second > ul.tabheader > li > a').on('click', function(event) {
    event.preventDefault();
    $('.tabed_contents').hide();
    var href = $(this).attr('href');
    $(href).show();
    $('.tabs > ul.tabheader > li').removeClass('active');
    $(this).closest('.tabed_contents').removeClass('show');
    $(this).closest('li').addClass('active');
})

兄弟セレクターを使用してこれを行うもっときれいな方法があると確信していますが、これはまったく同じように機能します。

于 2013-10-08T15:49:10.110 に答える