1. 首页
  2. 问答
  3. 在一个页面上的多个Jquery选项卡部分

在一个页面上的多个Jquery选项卡部分

2017-02-14 176 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个标签区域，您知道为什么这可能吗？ –

相关问题

 相关问题