Question

使用jquery创建选项卡。几乎没有将默认设置添加到选项卡菜单。我创建了一个.show类来查看选项卡菜单的第一个内容。如果我点击了其他按钮，则表示当前标签的the show class removed from the default first menu和also other tabbed menu in my page。

我的工作fiddle显示了此案例的明确问题

我的标记就像

<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 class，用于每个选项卡的第一次导航，在单击从相应元素中删除的其他菜单后设置为默认视图（show）。同时执行类show也会删除其他类。小提琴显示问题清楚。

.show{
    display: block !important;
}

如何防止此问题（删除deafult show类）。

Answer 1

好的，所以当您与第一个菜单进行交互时，第二个菜单中的外观会发生变化。您需要做的是为您希望此选项卡浏览器运行的每个实例设置不同的功能。

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

我确信使用兄弟选择器有更好的方法可以做到这一点，但这样做也会一样。

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

1 个答案: