我在使用“jquery”选项卡上的“each”函数时遇到了一些麻烦，我尝试使用“$ this”变量创建代码作为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>
</li>
<li>
<a title="Photos" href="#second-tab"><i class="fa fa-picture-o"></i> Photos</a>
</li>
<li>
<a title="About" href="#third-tab"><i class="fa fa-info-circle"></i> About</a>
</li>
<li>
<a title="Contact" href="#fourth-tab"><i class="fa fa-envelope"></i> Contact</a>
</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>
</li>
<li>
<a title="Photos" href="#second-tab"><i class="fa fa-picture-o"></i> Photos</a>
</li>
<li>
<a title="About" href="#third-tab"><i class="fa fa-info-circle"></i> About</a>
</li>
<li>
<a title="Contact" href="#fourth-tab"><i class="fa fa-envelope"></i> Contact</a>
</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>
答案 0 :(得分：0)
只是一个简单的问题：您不能多次使用相同的ID。你会想要使用类。
您需要在标签容器上解决问题：
<div id="first-section-tabs" class="generic-tabs">
</div>
在其中的<ul>元素中：
<ul class="tabs"></ul>
标签href需要指向div上的唯一id：
<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和每个“第一”li。它的编写方式现在会看到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