0

подскажите как делать кнопки перехода между табами? Сами табы написал, а как сделать кнопки не догоняю.введите сюда описание изображения

[![введите сюда описание изображения][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>

1 ответ 1

2

 $(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>

Так в Вашем примере все работает. Надо просто подключить jquery. Или что именно у Вас не получается?

10
  • 1
    Я дополнил ответ.
    – Lukas
    5 сен 2018 в 10:00
  • 1
    Где не работают? Что пишет в console?
    – Lukas
    5 сен 2018 в 20:09
  • 1
    Извиняюсь, всё работает! Спасибо
    – SimaDmtr
    5 сен 2018 в 20:37
  • 1
    Вам надо чтоб класс навешивался на сам tab-content или на кнопку change ?
    – Lukas
    6 сен 2018 в 7:51
  • 1
    Поправил ответ. Я правильно понял что Вам надо?
    – Lukas
    6 сен 2018 в 14:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.