Tabbing buttons

Question

Tell me how to make the buttons between tabs? The tabs themselves wrote, and how to make the buttons do not catch up.

[![введите сюда описание изображения][1]][1]

 $(document).ready(function() { $('.tab-content').hide(); $('.tab-content:first').show(); $('.tabs li:first').addClass('active'); $('.tabs li').click(function() { $('.tabs li').removeClass('active'); $(this).addClass('active'); $('.tab-content').hide(); var selectTab = $(this).find('a').attr("href"); $(selectTab).fadeIn(); return false; }); } );

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="articlesContent"> <ul class="tabs-container"> <li class="tab-content" id="tab1"> <ul class="artRow"> <li class="artItem invisLink"> <a href=""></a> <div class="artTitle"> <h2>Ритуальные услуги<br> в Беларуси</h2> </div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"> <a href=""></a> <div class="artTitle"> <h2>Ритуальные услуги<br> в Беларуси</h2> </div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"> <a href=""></a> <div class="artTitle"> <h2>Ритуальные услуги<br> в Беларуси</h2> </div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"> <a href=""></a> <div class="artTitle"> <h2>Ритуальные услуги<br> в Беларуси</h2> </div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"> <a href=""></a> <div class="artTitle"> <h2>Ритуальные услуги<br> в Беларуси</h2> </div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"> <a href=""></a> <div class="artTitle"> <h2>Ритуальные услуги<br> в Беларуси</h2> </div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> </ul> </li> <li class="tab-content" id="tab2"> <ul class="artRow"> <li class="artItem invisLink"> <a href=""></a> <div class="artTitle"> <h2>Ритуальные услуги<br> в Беларуси</h2> </div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"> <a href=""></a> <div class="artTitle"> <h2>Ритуальные услуги<br> в Беларуси</h2> </div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"> <a href=""></a> <div class="artTitle"> <h2>Ритуальные услуги<br> в Беларуси</h2> </div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"> <a href=""></a> <div class="artTitle"> <h2>Ритуальные услуги<br> в Беларуси</h2> </div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"> <a href=""></a> <div class="artTitle"> <h2>Ритуальные услуги<br> в Беларуси</h2> </div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"> <a href=""></a> <div class="artTitle"> <h2>Ритуальные услуги<br> в Беларуси</h2> </div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> </ul> </li> <li class="tab-content" id="tab3"> <ul class="artRow"> <li class="artItem invisLink"> <a href=""></a> <div class="artTitle"> <h2>Ритуальные услуги<br> в Беларуси</h2> </div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"> <a href=""></a> <div class="artTitle"> <h2>Ритуальные услуги<br> в Беларуси</h2> </div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"> <a href=""></a> <div class="artTitle"> <h2>Ритуальные услуги<br> в Беларуси</h2> </div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"> <a href=""></a> <div class="artTitle"> <h2>Ритуальные услуги<br> в Беларуси</h2> </div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"> <a href=""></a> <div class="artTitle"> <h2>Ритуальные услуги<br> в Беларуси</h2> </div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"> <a href=""></a> <div class="artTitle"> <h2>Ритуальные услуги<br> в Беларуси</h2> </div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> </ul> </li> </ul> <ul class="articlesNav tabs"> <li class="btn prev invisLink"> <a href=""></a> </li> <li><a class="tabItem" href="#tab1">1</a></li> <li><a class="tabItem" href="#tab2">2</a></li> <li><a class="tabItem" href="#tab3">3</a></li> <li class="btn next invisLink"> <a href=""></a> </li> </ul> </div>

Accepted Answer · 2018-09-04T13:52:06

  $(document).ready(function () { $('.tab-content').hide(); $('.tab-content:first').show(); $('.tabItem:first').addClass('active'); $('.tabs a').click(function () { let tabs = $('.active'); $(tabs).removeClass('active'); $(this).parent().addClass('active'); $('.tab-content').hide(); var selectTab = $(this).attr("href"); $(selectTab).fadeIn(); return false; }); $('.change').click(function(){ let tabs = $('.active'); let visibleTab = $('.tabs-container :visible').first(); let canChangeUp = $(visibleTab).next('.tab-content').length; let canChangeDown = $(visibleTab).prev('.tab-content').length; if ($(this).hasClass('next') && canChangeUp){ tabs.removeClass('active'); tabs.next('.tabItem').addClass('active'); visibleTab.hide(); $(visibleTab).next('.tab-content').fadeIn() } if ($(this).hasClass('prev') && canChangeDown){ tabs.removeClass('active'); tabs.prev('.tabItem').addClass('active'); visibleTab.hide(); $(visibleTab).prev('.tab-content').fadeIn() } }) });

 .active { background-color:red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="articlesContent"> <ul class="tabs-container"> <li class="tab-content" id="tab1"> <ul class="artRow"> <li class="artItem invisLink"><a href=""></a> <div class="artTitle"><h2>Ритуальные услуги<br> в Беларуси1</h2></div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"><a href=""></a> <div class="artTitle"><h2>Ритуальные услуги<br>в Беларуси1</h2></div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"><a href=""></a> <div class="artTitle"><h2>Ритуальные услуги<br>в Беларуси1 </h2></div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"><a href=""></a> <div class="artTitle"><h2>Ритуальные услуги<br>в Беларуси1</h2></div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"><a href=""></a> <div class="artTitle"><h2>Ритуальные услуги<br>в Беларуси1</h2></div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"><a href=""></a> <div class="artTitle"><h2>Ритуальные услуги<br>в Беларуси1</h2></div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> </ul> </li> <li class="tab-content" id="tab2"> <ul class="artRow"> <li class="artItem invisLink"><a href=""></a> <div class="artTitle"><h2>Ритуальные услуги<br>в Беларуси2</h2></div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"><a href=""></a> <div class="artTitle"><h2>Ритуальные услуги<br>в Беларуси2</h2></div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"><a href=""></a> <div class="artTitle"><h2>Ритуальные услуги<br> в Беларуси2</h2></div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"><a href=""></a> <div class="artTitle"><h2>Ритуальные услуги<br> в Беларуси2</h2></div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"><a href=""></a> <div class="artTitle"><h2>Ритуальные услуги<br>в Беларуси2</h2></div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"><a href=""></a> <div class="artTitle"><h2>Ритуальные услуги<br>в Беларуси2</h2></div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> </ul> </li> <li class="tab-content" id="tab3"> <ul class="artRow"> <li class="artItem invisLink"><a href=""></a> <div class="artTitle"><h2>Ритуальные услуги<br>в Беларуси3</h2></div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"><a href=""></a> <div class="artTitle"><h2>Ритуальные услуги<br>в Беларуси3</h2></div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"><a href=""></a> <div class="artTitle"><h2>Ритуальные услуги<br>в Беларуси3</h2></div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"><a href=""></a> <div class="artTitle"><h2>Ритуальные услуги<br>в Беларуси3</h2></div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"><a href=""></a> <div class="artTitle"><h2>Ритуальные услуги<br>в Беларуси3</h2></div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> <li class="artItem invisLink"><a href=""></a> <div class="artTitle"><h2>Ритуальные услуги<br> в Беларуси3</h2></div> <div class="artImage"><img src="img/jpeg/articletitle.jpg" alt=""></div> </li> </ul> </li> </ul> <ul class="articlesNav tabs"> <li class="btn prev invisLink change"><</li> <li class="tabItem"><a href="#tab1">1</a></li> <li class="tabItem"><a href="#tab2">2</a></li> <li class="tabItem"><a href="#tab3">3</a></li> <li class="btn next invisLink change">></li> </ul> </div>

So in your example, everything works. You just need to connect jquery. Or what exactly you fail?

Do you need the class to be hung on the tab-content itself or on the change button?

Tabbing buttons

1 answer 1

More articles: