1つのページに複数のJqueryタブセクションがあります

jqueryのタブで "各"機能を使用するには問題がありますが、 "$ this"変数を使用してコードを作成しようとしましたが、私が後でそれがスクリプトですでに定義されていることを認識したとき。1つのページに複数の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

をどの'each'関数？上のコードで 'each 'を見つけることができません。 –

タブはうまく動いています！あなたはjQueryを含んでいましたか？ –

問題を明確にしてください。タブのボタンは正常に動作するようです。 – Santi

ただ、1簡単な問題：あなたが複数回同じIDを使用することはできません。代わりにクラスを使用したいと思うでしょう。

あなたのタブコンテナに問題を修正する必要がありますを指すようにhrefが必要になります

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

とタブ：

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

そして、それらの内側<ul>要素にユニークidのdiv：

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

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

をとjQueryコードは、それぞれ「第一」のdivとそれぞれ「最初の」リーに対処することを確認する必要があります。

とコンテンツのdiv要素は、ユニークなid秒を持っている必要があります。それが今で書かれている方法は、それは、非常に最初の各示し、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

更新されたコードではまだ動作していません。http://codepen.io/assasinate66/pen/oBVNMp –

ええ、置き換える必要があります。私は答えを更新します。 – funwhilelost

あなたの返事をありがとう、それは2つ以上のタブセクションのために働かない、なぜこれができたか知っていますか？ –

1つのページに複数のJqueryタブセクションがあります

答えて

関連する問題