使用jquery的导航选项卡。如何为active Directory设置默认类

hi-al-am使用jquery创建了选项卡。几乎所有操作都是在不向选项卡菜单添加默认设置的情况下完成的。我创建了一个

.show

类，使视图成为选项卡菜单的第一个内容。如果单击“其他”按钮，则表示“显示”类已从当前选项卡的默认第一个菜单和“我的页面”中的其他选项卡菜单中删除

在这里，我的工作表明了这个案件的明显问题

我的标记是

<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>  

---

显示用于每个选项卡第一次导航的类，以在单击其他菜单后设置为默认视图（显示），该类将从相应元素中删除。在执行类

show

时，也将删除其他类。那把小提琴清楚地显示了问题

.show{
    display: block !important;
}

---

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

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

CSS

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

---

我相信有一种更漂亮的方法可以使用同级选择器来实现这一点，但效果也一样。

我不明白，为什么你甚至需要一个

show

类？如何使用它？show类，用于每个选项卡的首次导航，在单击从相应元素中删除的其他菜单后设置为默认视图（show）。不确定是否有完全不同的方法，可能值得知道…@AndreaLigios这里的问题是在同一页面中使用多个选项卡菜单。

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

<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>

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