1. 首頁
  2. 問答
  3. 在一個頁面上的多個Jquery選項卡部分

在一個頁面上的多個Jquery選項卡部分

2017-02-14 172 views
0

我在使用「每個」功能在我的jquery選項卡上工作時遇到了一些麻煩，我嘗試使用「$ this」變量創建代碼作爲jquery插件，但沒有運氣當我後來意識到它已經在腳本中定義。在一個頁面上的多個Jquery選項卡部分

我需要每個標籤容器工作的標籤，因爲我運行這些到每個循環的PHP。

標籤容器ID是通用標籤，任何幫助將不勝感激！

Codepen：http://codepen.io/assasinate66/pen/NdJKZL

(function($) { 
 
    /* trigger when page is ready */ 
 
    $(document).ready(function() { 
 

 
    //Tabs functionality 
 
    //Firstly hide all content divs 
 
    $('#generic-tabs div').hide(); 
 
    //Then show the first content div 
 
    $('#generic-tabs div:first').show(); 
 
    //Add active class to the first tab link 
 
    $('#generic-tabs ul#tabs li:first').addClass('active'); 
 
    //Functionality when a tab is clicked 
 
    $('#generic-tabs ul#tabs li a').click(function() { 
 
     //Firstly remove the current active class 
 
     $('#generic-tabs ul#tabs li').removeClass('active'); 
 
     //Apply active class to the parent(li) of the link tag 
 
     $(this).parent().addClass('active'); 
 
     //Set currentTab to this link 
 
     var currentTab = $(this).attr('href'); 
 
     //Hide away all tabs 
 
     $('#generic-tabs div').hide(); 
 
     //show the current tab 
 
     $(currentTab).show(); 
 
     //Stop default link action from happening 
 
     return false; 
 
    }); 
 
    }); 
 
})(window.jQuery);
body { 
 
    font: 67.5% Helvetica, Arial, Sans-serif; 
 
    background: #2c3e50; 
 
} 
 
/*Box sizing stuff*/ 
 

 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box- sizing: border-box; 
 
} 
 
/*Font styels*/ 
 

 
h1 { 
 
    font-weight: normal; 
 
    font-size: 1.6em; 
 
} 
 
h1.callout { 
 
    color: #FFFFFF; 
 
    font-size: 2em; 
 
    margin: 1em 0; 
 
} 
 
p { 
 
    font-size: 1.2em; 
 
    color: #a3a3a3; 
 
    line-height: 1.5; 
 
} 
 
p strong { 
 
    color: #555555; 
 
} 
 
p a { 
 
    color: #27ae60; 
 
    text-decoration: none; 
 
} 
 
/*img stuff*/ 
 

 
img { 
 
    max-width: 100%; 
 
} 
 
/*Generic styles*/ 
 

 
#wrapper { 
 
    max-width: 800px; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 
#generic-tabs { 
 
    width: 100%; 
 
    padding: 20px; 
 
} 
 
/*Tab styles*/ 
 

 
#generic-tabs ul { 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#generic-tabs ul li { 
 
    float: left; 
 
    display: inline-block; 
 
    width: 25%; 
 
    background: #EDEDED; 
 
    border-top: 4px solid #CCCCCC; 
 
    border-right: 1px solid #CCCCCC; 
 
} 
 
#generic-tabs ul li:last-child { 
 
    border-right: none; 
 
} 
 
#generic-tabs ul li:first-child { 
 
    padding-left: 0; 
 
} 
 
/*Tab link styles*/ 
 

 
#generic-tabs ul li a { 
 
    text-align: center; 
 
    display: block; 
 
    font-size: 1.2em; 
 
    text-decoration: none; 
 
    padding: 1.2em 1em; 
 
    line-height: 16px; 
 
    color: #BBBBBB; 
 
} 
 
/*Active tab styles*/ 
 

 
#generic-tabs ul li.active { 
 
    background: #FFFFFF; 
 
    border-top: 4px solid #27ae60; 
 
} 
 
#generic-tabs ul li.active a { 
 
    color: #333333; 
 
} 
 
#generic-tabs ul li.active a i { 
 
    color: #27ae60; 
 
} 
 
/*Tab content styles*/ 
 

 
#generic-tabs .tab-content { 
 
    background: #FFFFFF; 
 
    padding: 3em 2em; 
 
} 
 
#generic-tabs .tab-content h1 { 
 
    margin-top: 0; 
 
} 
 
@media only screen and (min-width: 650px) { 
 
    h1 { 
 
    font-size: 2em; 
 
    } 
 
    h1.callout { 
 
    font-size: 3em; 
 
    } 
 
    p { 
 
    font-size: 1.4em; 
 
    } 
 
    #generic-tabs ul li a { 
 
    font-size: 1.6em; 
 
    padding: 1.2em 2em; 
 
    line-height: 16px; 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.css" /> 
 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 

 
<div id="wrapper"> 
 
    <section id="generic-tabs"> 
 

 
    <ul id="tabs"> 
 
     <li> 
 
     <a title="Home" href="#first-tab"><i class="fa fa-home"></i> Home</a> \t 
 
     </li> 
 
     <li> 
 
     <a title="Photos" href="#second-tab"><i class="fa fa-picture-o"></i> Photos</a> \t 
 
     </li> 
 
     <li> 
 
     <a title="About" href="#third-tab"><i class="fa fa-info-circle"></i> About</a> \t 
 
     </li> 
 
     <li> 
 
     <a title="Contact" href="#fourth-tab"><i class="fa fa-envelope"></i> Contact</a> \t 
 
     </li> 
 
    </ul> 
 
    <div id="first-tab" class="tab-content"> 
 
     <h1>Home</h1> 
 
     <p><strong>Hey there, <a href="http://cliftwalker.co.uk">Jonathan Clift</a> here! I created these tabs as I find myself recreating this tab style over and over again. Use them as you please and let me know what you think.</strong> 
 
     </p> 
 
     <p>Lorem ipsum dolor sit amet, utroque splendide an quo. Omnesque pertinacia efficiantur vix at, soleat quaeque assueverit et vis. Te sit tale eripuit corrumpit, cum ea case graeci legimus. Sea ex assentior honestatis adversarium. Mei ea dico meis 
 
     instructior, no eum ipsum voluptatum, quodsi pertinax postulant in sed. Te eum pertinacia suscipiantur, sea eirmod sanctus ea. Vel habeo feugait ea, an apeirian adversarium nam.</p> 
 
    </div> 
 

 
    <div id="second-tab" class="tab-content"> 
 
     <h1>Twitter office photo!</h1> 
 
     <a href="https://www.flickr.com/photos/twitteroffice/15437700946" title="Twitter Boston by Twitter, on Flickr"> 
 
     <img src="https://farm3.staticflickr.com/2948/15437700946_3dec413dd2_b.jpg" alt="Twitter Boston"> 
 
     </a> 
 
     <p>Lorem ipsum dolor sit amet, utroque splendide an quo. Omnesque pertinacia efficiantur vix at, soleat quaeque assueverit et vis. Te sit tale eripuit corrumpit, cum ea case graeci legimus. Sea ex assentior honestatis adversarium. Mei ea dico meis 
 
     instructior, no eum ipsum voluptatum, quodsi pertinax postulant in sed. Te eum pertinacia suscipiantur, sea eirmod sanctus ea. Vel habeo feugait ea, an apeirian adversarium nam.</p> 
 
    </div> 
 

 
    <div id="third-tab" class="tab-content"> 
 
     <h1>About</h1> 
 
     <p>Lorem ipsum dolor sit amet, utroque splendide an quo. Omnesque pertinacia efficiantur vix at, soleat quaeque assueverit et vis. Te sit tale eripuit corrumpit, cum ea case graeci legimus. Sea ex assentior honestatis adversarium. Mei ea dico meis 
 
     instructior, no eum ipsum voluptatum, quodsi pertinax postulant in sed. Te eum pertinacia suscipiantur, sea eirmod sanctus ea. Vel habeo feugait ea, an apeirian adversarium nam.</p> 
 
    </div> 
 
    <div id="fourth-tab" class="tab-content"> 
 
     <h1>Contact</h1> 
 
     <p>Lorem ipsum dolor sit amet, utroque splendide an quo. Omnesque pertinacia efficiantur vix at, soleat quaeque assueverit et vis. Te sit tale eripuit corrumpit, cum ea case graeci legimus. Sea ex assentior honestatis adversarium. Mei ea dico meis 
 
     instructior, no eum ipsum voluptatum, quodsi pertinax postulant in sed. Te eum pertinacia suscipiantur, sea eirmod sanctus ea. Vel habeo feugait ea, an apeirian adversarium nam.</p> 
 
    </div> 
 

 
    </section> 
 

 
    <section id="generic-tabs"> 
 

 
    <ul id="tabs"> 
 
     <li> 
 
     <a title="Home" href="#first-tab"><i class="fa fa-home"></i> Home</a> \t 
 
     </li> 
 
     <li> 
 
     <a title="Photos" href="#second-tab"><i class="fa fa-picture-o"></i> Photos</a> \t 
 
     </li> 
 
     <li> 
 
     <a title="About" href="#third-tab"><i class="fa fa-info-circle"></i> About</a> \t 
 
     </li> 
 
     <li> 
 
     <a title="Contact" href="#fourth-tab"><i class="fa fa-envelope"></i> Contact</a> \t 
 
     </li> 
 
    </ul> 
 
    <div id="first-tab" class="tab-content"> 
 
     <h1>Home</h1> 
 
     <p><strong>Hey there, <a href="http://cliftwalker.co.uk">Jonathan Clift</a> here! I created these tabs as I find myself recreating this tab style over and over again. Use them as you please and let me know what you think.</strong> 
 
     </p> 
 
     <p>Lorem ipsum dolor sit amet, utroque splendide an quo. Omnesque pertinacia efficiantur vix at, soleat quaeque assueverit et vis. Te sit tale eripuit corrumpit, cum ea case graeci legimus. Sea ex assentior honestatis adversarium. Mei ea dico meis 
 
     instructior, no eum ipsum voluptatum, quodsi pertinax postulant in sed. Te eum pertinacia suscipiantur, sea eirmod sanctus ea. Vel habeo feugait ea, an apeirian adversarium nam.</p> 
 
    </div> 
 

 
    <div id="second-tab" class="tab-content"> 
 
     <h1>Twitter office photo!</h1> 
 
     <a href="https://www.flickr.com/photos/twitteroffice/15437700946" title="Twitter Boston by Twitter, on Flickr"> 
 
     <img src="https://farm3.staticflickr.com/2948/15437700946_3dec413dd2_b.jpg" alt="Twitter Boston"> 
 
     </a> 
 
     <p>Lorem ipsum dolor sit amet, utroque splendide an quo. Omnesque pertinacia efficiantur vix at, soleat quaeque assueverit et vis. Te sit tale eripuit corrumpit, cum ea case graeci legimus. Sea ex assentior honestatis adversarium. Mei ea dico meis 
 
     instructior, no eum ipsum voluptatum, quodsi pertinax postulant in sed. Te eum pertinacia suscipiantur, sea eirmod sanctus ea. Vel habeo feugait ea, an apeirian adversarium nam.</p> 
 
    </div> 
 

 
    <div id="third-tab" class="tab-content"> 
 
     <h1>About</h1> 
 
     <p>Lorem ipsum dolor sit amet, utroque splendide an quo. Omnesque pertinacia efficiantur vix at, soleat quaeque assueverit et vis. Te sit tale eripuit corrumpit, cum ea case graeci legimus. Sea ex assentior honestatis adversarium. Mei ea dico meis 
 
     instructior, no eum ipsum voluptatum, quodsi pertinax postulant in sed. Te eum pertinacia suscipiantur, sea eirmod sanctus ea. Vel habeo feugait ea, an apeirian adversarium nam.</p> 
 
    </div> 
 
    <div id="fourth-tab" class="tab-content"> 
 
     <h1>Contact</h1> 
 
     <p>Lorem ipsum dolor sit amet, utroque splendide an quo. Omnesque pertinacia efficiantur vix at, soleat quaeque assueverit et vis. Te sit tale eripuit corrumpit, cum ea case graeci legimus. Sea ex assentior honestatis adversarium. Mei ea dico meis 
 
     instructior, no eum ipsum voluptatum, quodsi pertinax postulant in sed. Te eum pertinacia suscipiantur, sea eirmod sanctus ea. Vel habeo feugait ea, an apeirian adversarium nam.</p> 
 
    </div> 
 

 
    </section> 
 
</div>

來源

2017-02-14 Harry-Robinson

+0

哪每個功能？在上面的代碼中找不到任何'each'。 –

+0

這些標籤工作得很好！你包括jQuery嗎？ –

+0

請說明你的問題。標籤按鈕似乎工作正常。 – Santi

回答

0

只是一個簡單的問題：不能使用相同ID超過一​​次。你會想要使用類。

你需要修復您標籤的容器問題：

<div id="first-section-tabs" class="generic-tabs"> 
</div>

而且他們內部的<ul>元素：

<ul class="tabs"></ul>

而且標籤href將需要指向獨特的id s在divs上：

<li><a href='#group-one-tab-one'>First</a></li>

和內容的div需要有獨特的id S：

<div id='group-one-tab-one'>Stuff in here</div>

而jQuery代碼將需要確保解決每個「第一」的div和每一個「第一次」裏。它現在寫入的方式，它會看到8名的div和8個選項卡，然後顯示第一個每個 - 不是第一次的4

(function($) { 
    $(document).ready(function() { 
    $('.generic-tabs').each(function(index, tabs) { 
     var $tabs = $(tabs); 
     $tabs.find('div').hide(); 
     $tabs.find('div:first').show(); 
     $tabs.find('ul.tabs li:first').addClass('active'); 
    }); 

    $('.generic-tabs ul.tabs li a').click(function(e) { 
     var $thisTab = $(e.currentTarget).closest('li'); 
     var $tabsContainer = $(e.currentTarget).closest('.generic-tabs'); 

     // notice how these variables make it almost as readable as your comments 
     $tabsContainer.find('ul.tabs li').removeClass('active'); 
     $thisTab.addClass('active'); 

     // hide all tab contents 
     $tabsContainer.find('div').hide(); 

     // show contents of tab referenced in 'href' 
     var currentTab = $(this).attr('href'); 
     $(currentTab).show(); 

     return false; 
    }); 
    }); 
})(window.jQuery);

在每一組中看到最終的分叉代碼在這裏：http://codepen.io/funwhilelost/pen/GreRdY

來源

2017-02-14 22:05:22 funwhilelost

+0

它仍然無法使用更新後的代碼，請參閱此處：http://codepen.io/assasinate66/pen/oBVNMp –

+0

是的，還有一些事情需要更換。我會更新答案。 – funwhilelost

+0

感謝您的回覆，它不適用於超過2個標籤區域，您知道爲什麼這可能嗎？ –

相關問題

 相關問題