jquery - 使用 jquery 的导航选项卡。如何设置活动的默认类

Question

嗨，我使用 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;
}

我如何防止这个问题（删除默认显示类）。

Answer 1

Ok, so what's going on is when you interact with the first menu, the appearance from the second menu is changed. What you're going to need to do is set up different functions for each instance where you want this tab-browser to function.

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');
})

I'm sure there's a much prettier way to do this using sibling selectors, but this will work just the same.