同步标签导航

Question

我有两个标签导航，一个在顶部，一个在底部。 我通过类而不是id定位div，以便它们都显示相关内容。

当用户点击“业务”选项卡时，它会在顶部和底部显示用户的相关信息。我的问题是，我不能让两个选项卡显示“活动”状态。它只显示在我点击的顶部或底部的标签上，尽管它们具有相同的类名。

任何帮助，欢迎。

迈克

---

HTML：

<!-- TOP TAB --> 
<section id="registerTabsContainer"> 

    <ul class="tabs"> 
     <li><a href=".tabViewer">Are you a Viewer?</a></li> 
     <li><a href=".tabBusiness">Are you a Business?</a></li> 
     <li><a href=".tabPlatform">Are you a Platform?</a></li> 
    </ul> 

    <!-- TOP CONTENT --> 
    <div class="registerTabsContent tabViewer"> 
     <h1>Register as a Viewer</h1> 
    </div> 

    <div class="registerTabsContent tabBusiness"> 
     <h1>Register as a Business</h1> 
    </div> 

    <div class="registerTabsContent tabPlatform"> 
     <h1>Register as a Business</h1> 
    </div> 

    <!-- BOTTOM TAB --> 
    <section id="tourSummaryTabsContainer"> 

     <ul class="tabs"> 
      <li><a href=".tabViewer">Are you a Viewer?</a></li> 
      <li><a href=".tabBusiness">Are you a Business?</a></li> 
      <li><a href=".tabPlatform">Are you a Platform?</a></li> 
     </ul> 

     <!-- BOTTOM CONTENT --> 
     <div class="tourSummaryTabsContent tabViewer"> 
      <h1> Viewer content Bottom</h1> 
     </div> 

     <div class="tourSummaryTabsContent tabBusiness"> 
      <h1>Register as a Business</h1> 
     </div> 

     <div class="tourSummaryTabsContent tabPlatform"> 
      <h1>Register as a Business</h1> 
     </div> 

JQUERY：

$(document).ready(function() { 
    // tabs script 
    $('.tabs li a:first').addClass('active'); 
    $('.registerTabsContent:not(:first), .tourSummaryTabsContent:not(:first)').hide(); 

    $('.tabs li a').click(function() { 
     var t = $(this).attr('href'); 

     $('.tabs li a').removeClass('active');  
     $(this).addClass('active'); 
     $('.registerTabsContent, .tourSummaryTabsContent').hide(); 
     $(t).fadeIn('slow'); 

     return false;  
    }) 
}); 

CSS：

.tabs { 
    list-style-type: none; 
    margin:0; 
    padding:0; 
} 

.tabs li { 
    padding: 0; 
    list-style-type: none; 
    margin:0; 
    float:left; 
    list-style:none; 
} 
.tabs li a { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:13px; 
    color:#999999; 
    padding:7px 25px 4px 25px; 
    display:block; 
    text-decoration:none; 

    background: rgba(227,227,227,1); 
    /*border-right: 1px solid rgba(153,153,153,1); */ 
} 

.tabs li a.active { 
    background: white; 
    color:#999999; 
    /*border-top: 1px solid white;*/ 
} 

.tabs li a:hover { 
    padding:7px 25px 4px 25px; 
    background:#fff; 
} 

Answer 1

在这里，我已经更新了你的代码来使用一个活跃的类来对抗一个不活跃的类。

HTML

<ul class="tabs"> 
     <li><a href=".tabViewer">Are you a Viewer?</a></li> 
     <li><a href=".tabBusiness">Are you a Business?</a></li> 
     <li><a href=".tabPlatform">Are you a Platform?</a></li> 
    </ul> 

    <!-- TOP CONTENT --> 
    <div class="registerTabsContent tabViewer"> 
     <h1>Register as a Viewer</h1> 
    </div> 

    <div class="registerTabsContent tabBusiness"> 
     <h1>Register as a Business</h1> 
    </div> 

    <div class="registerTabsContent tabPlatform"> 
     <h1>Register as a Business</h1> 
    </div> 

    <!-- BOTTOM TAB --> 
    <section id="tourSummaryTabsContainer"> 
     <ul class="tabs"> 
      <li><a href=".tabViewer">Are you a Viewer?</a></li> 
      <li><a href=".tabBusiness">Are you a Business?</a></li> 
      <li><a href=".tabPlatform">Are you a Platform?</a></li> 
     </ul> 

     <!-- BOTTOM CONTENT --> 
     <div class="tourSummaryTabsContent tabViewer"> 
      <h1> Viewer content Bottom</h1> 
     </div> 

     <div class="tourSummaryTabsContent tabBusiness"> 
      <h1>Register as a Business</h1> 
     </div> 

     <div class="tourSummaryTabsContent tabPlatform"> 
      <h1>Register as a Business</h1> 
     </div> 
    </section> 

CSS

.tabs li { 
    padding: 0; 
    list-style-type: none; 
    margin: 0; 
    float: left; 
    list-style: none; 
} 

    .tabs li a { 
     font-family: Arial, Helvetica, sans-serif; 
     font-size: 13px; 
     color: #999999; 
     padding: 7px 25px 4px 25px; 
     display: block; 
     text-decoration: none; 
     background: #e3e3e3; 
     /*border-right: 1px solid rgba(153,153,153,1); */ 
    } 

     .tabs li a.active, .tabs li a:hover{ 
      background: #fff; 
      /*border-top: 1px solid white;*/ 
     } 

的JavaScript

$(document).ready(function() { 
    // tabs script 
    $('li:eq(0) a', '.tabs').addClass('active'); 
    $('.registerTabsContent:not(:first), .tourSummaryTabsContent:not(:first)').hide(); 

    $('.tabs li a').click(function(e) { 
     e.preventDefault(); 

     if (!$(this).hasClass('active')) { 
      $('a.active').removeClass('active'); 
      var i = $(this).parent().index(); 
      $('li:eq(' + i + ') a', '.tabs').addClass('active'); 

      $('.registerTabsContent, .tourSummaryTabsContent').hide(); 
      var t = $(this).attr('href'); 
      $(t).fadeIn('slow'); 
     } 
    }); 

}); 

而且，这里是一个工作FIDDLE。请让我知道你是否需要任何解释。