同步標籤導航

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。請讓我知道你是否需要任何解釋。