0

Есть "табы" с якорями, которые отправляются в ссылку. Реализованно, спасибо большое за это пользователю данного форума так:

// Обнаружение ссылки якоря для таба
let url = location.href.split('#')[1], el = $('#'+url);
if(el.length > 0 && el.closest('.tabs-block').length > 0) {
    let parent = el.closest('.tabs-block');
  //
  parent.find('.item.--active').removeClass('--active');
  parent.find('.tabs .item[href="'+url+'"]').addClass('--active');
  parent.find('.content #'+url).addClass('--active');
}

// Переключение табов
$('.tabs-block .tabs').on('click', '.item', function(){
    if(!$(this).hasClass('--active')) {
    let parent = $(this).closest('.tabs-block'),
            id = $(this).attr('href').split('#')[1];
    //
    parent.find('.item.--active').removeClass('--active');
    parent.find('.content #'+id).addClass('--active');
    $(this).addClass('--active');
  }
});
.tabs-block {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.tabs-block .tabs {
  display: flex;
  flex-direction: column;
  max-width: 325px;
  margin-right: 30px;
}

.tabs-block .tabs .item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  color: #000;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  text-decoration: none !important;
  padding-right: 35px;
  box-sizing: border-box;
  opacity: .5;
  transition: all .3s;
  position: relative;
  cursor: pointer;
}

.tabs-block .tabs .item > span:nth-child(1) {
  margin-right: 15px;
}

.tabs-block .tabs .item > span:nth-child(2) {
  transition: inherit;
}

.tabs-block .tabs .item::after {
  content: '';
  display: block;
  width: 13px;
  height: 13px;
  background: url('//mir-architects.ru/html/icons/arrow-link.svg') no-repeat center center / 100% auto;
  position: absolute;
  top: 50%;
  right: 0;
  transform: scaleX(-1) translateY(-100%);
  transition: inherit;
}

.tabs-block .tabs .item:hover {
  opacity: 1;
}

.tabs-block .tabs .item:hover > span:nth-child(2) {
  color: #e2bc52;
}

.tabs-block .tabs .item:hover::after {
  background-image: url('//mir-architects.ru/html/icons/arrow-link-hover.svg');
  transform: scaleX(-1) translateY(-100%) translateX(5px);
}

.tabs-block .tabs .item.--active {
  opacity: 1;
}

.tabs-block .tabs .item:not(:last-child) {
  margin-bottom: 33px;
}

.tabs-block .content {
  display: block;
  max-width: 827px;
  width: 100%;
}

.tabs-block .content .item {
  display: none;
}

.tabs-block .content .item.--active {
  display: block;
}

@media (max-width: 900px) {
  .tabs-block .tabs .item:not(:last-child) {
    margin-bottom: 10px;
  }
}

@media (max-width: 700px) {
  .tabs-block {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  
  .tabs-block .tabs {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-bottom: 30px;
  }
  
  .tabs-block .content {
    max-width: none;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs-block">
  <div class="tabs">
    <a href="#service1" class="item --active" rel="nofollow">
      <span>01</span>
      <span>Инженерно-геодезические изыскания</span>
    </a>
    <a href="#service2" class="item" rel="nofollow">
      <span>02</span>
      <span>Инженерно-геологические изыскания</span>
    </a>
    <a href="#service3" class="item" rel="nofollow">
      <span>03</span>
      <span>Инженерно-экологические изыскания</span>
    </a>
    <a href="#service4" class="item" rel="nofollow">
      <span>04</span>
      <span>Инженерно-гидрометеорологические изыскания</span>
    </a>
    <a href="#service5" class="item" rel="nofollow">
      <span>05</span>
      <span>Обследование зданий и сооружений</span>
    </a>
    <a href="#service6" class="item" rel="nofollow">
      <span>06</span>
      <span>Прохождение гос. и не гос. экспертизы</span>
    </a>
    <a href="#service7" class="item" rel="nofollow">
      <span>07</span>
      <span>Разработка проектной и рабочей документации</span>
    </a>
    <a href="#service8" class="item" rel="nofollow">
      <span>08</span>
      <span>Согласование проектов во всех заинтересованных инстанциях</span>
    </a>
    <a href="#service9" class="item" rel="nofollow">
      <span>09</span>
      <span>Сбор исходно-разрешительной документации</span>
    </a>
  </div>
  <div class="content">
    <div id="service1" class="item --active">Содержимое 01</div>
    <div id="service2" class="item">Содержимое 02</div>
    <div id="service3" class="item">Содержимое 03</div>
    <div id="service4" class="item">Содержимое 04</div>
    <div id="service5" class="item">Содержимое 05</div>
    <div id="service6" class="item">Содержимое 06</div>
    <div id="service7" class="item">Содержимое 07</div>
    <div id="service8" class="item">Содержимое 08</div>
    <div id="service9" class="item">Содержимое 09</div>
  </div>
</div>

Но есть маленький косячок, при нажатии на ссылки страница "прыгает" к якорю. Можно ли как-то отключить прыжок к якорю, но при этом без вреда для основного функционала, а именно отправки якоря в ссылку?

2 ответа 2

2
// Переключение табов
$('.tabs-block .tabs').on('click', '.item', function(){
    if(!$(this).hasClass('--active')) {
      let parent = $(this).closest('.tabs-block'),
          id = $(this).attr('href').split('#')[1];
      //
      parent.find('.item.--active').removeClass('--active');
      parent.find('.content #'+id).addClass('--active');
      $(this).addClass('--active');
      // Добавляем это
      history.pushState(null, null, '#'+id); // Добавляем в историю ссылку
      return false; // Отменяем переход по стандартной ссылке.
  }
});
0

Отмени стандартное действие ссылки через event.preventDefault()

// Обнаружение ссылки якоря для таба
let url = location.href.split('#')[1], el = $('#'+url);
if(el.length > 0 && el.closest('.tabs-block').length > 0) {
    let parent = el.closest('.tabs-block');
  //
  parent.find('.item.--active').removeClass('--active');
  parent.find('.tabs .item[href="'+url+'"]').addClass('--active');
  parent.find('.content #'+url).addClass('--active');
}

// Переключение табов
$('.tabs-block .tabs').on('click', '.item', function(e){
    e.preventDefault()
    if(!$(this).hasClass('--active')) {
    let parent = $(this).closest('.tabs-block'),
            id = $(this).attr('href').split('#')[1];
    //
    parent.find('.item.--active').removeClass('--active');
    parent.find('.content #'+id).addClass('--active');
    $(this).addClass('--active');
  }
});
.tabs-block {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.tabs-block .tabs {
  display: flex;
  flex-direction: column;
  max-width: 325px;
  margin-right: 30px;
}

.tabs-block .tabs .item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  color: #000;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  text-decoration: none !important;
  padding-right: 35px;
  box-sizing: border-box;
  opacity: .5;
  transition: all .3s;
  position: relative;
  cursor: pointer;
}

.tabs-block .tabs .item > span:nth-child(1) {
  margin-right: 15px;
}

.tabs-block .tabs .item > span:nth-child(2) {
  transition: inherit;
}

.tabs-block .tabs .item::after {
  content: '';
  display: block;
  width: 13px;
  height: 13px;
  background: url('//mir-architects.ru/html/icons/arrow-link.svg') no-repeat center center / 100% auto;
  position: absolute;
  top: 50%;
  right: 0;
  transform: scaleX(-1) translateY(-100%);
  transition: inherit;
}

.tabs-block .tabs .item:hover {
  opacity: 1;
}

.tabs-block .tabs .item:hover > span:nth-child(2) {
  color: #e2bc52;
}

.tabs-block .tabs .item:hover::after {
  background-image: url('//mir-architects.ru/html/icons/arrow-link-hover.svg');
  transform: scaleX(-1) translateY(-100%) translateX(5px);
}

.tabs-block .tabs .item.--active {
  opacity: 1;
}

.tabs-block .tabs .item:not(:last-child) {
  margin-bottom: 33px;
}

.tabs-block .content {
  display: block;
  max-width: 827px;
  width: 100%;
}

.tabs-block .content .item {
  display: none;
}

.tabs-block .content .item.--active {
  display: block;
}

@media (max-width: 900px) {
  .tabs-block .tabs .item:not(:last-child) {
    margin-bottom: 10px;
  }
}

@media (max-width: 700px) {
  .tabs-block {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  
  .tabs-block .tabs {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-bottom: 30px;
  }
  
  .tabs-block .content {
    max-width: none;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs-block">
  <div class="tabs">
    <a href="#service1" class="item --active" rel="nofollow">
      <span>01</span>
      <span>Инженерно-геодезические изыскания</span>
    </a>
    <a href="#service2" class="item" rel="nofollow">
      <span>02</span>
      <span>Инженерно-геологические изыскания</span>
    </a>
    <a href="#service3" class="item" rel="nofollow">
      <span>03</span>
      <span>Инженерно-экологические изыскания</span>
    </a>
    <a href="#service4" class="item" rel="nofollow">
      <span>04</span>
      <span>Инженерно-гидрометеорологические изыскания</span>
    </a>
    <a href="#service5" class="item" rel="nofollow">
      <span>05</span>
      <span>Обследование зданий и сооружений</span>
    </a>
    <a href="#service6" class="item" rel="nofollow">
      <span>06</span>
      <span>Прохождение гос. и не гос. экспертизы</span>
    </a>
    <a href="#service7" class="item" rel="nofollow">
      <span>07</span>
      <span>Разработка проектной и рабочей документации</span>
    </a>
    <a href="#service8" class="item" rel="nofollow">
      <span>08</span>
      <span>Согласование проектов во всех заинтересованных инстанциях</span>
    </a>
    <a href="#service9" class="item" rel="nofollow">
      <span>09</span>
      <span>Сбор исходно-разрешительной документации</span>
    </a>
  </div>
  <div class="content">
    <div id="service1" class="item --active">Содержимое 01</div>
    <div id="service2" class="item">Содержимое 02</div>
    <div id="service3" class="item">Содержимое 03</div>
    <div id="service4" class="item">Содержимое 04</div>
    <div id="service5" class="item">Содержимое 05</div>
    <div id="service6" class="item">Содержимое 06</div>
    <div id="service7" class="item">Содержимое 07</div>
    <div id="service8" class="item">Содержимое 08</div>
    <div id="service9" class="item">Содержимое 09</div>
  </div>
</div>

7
  • Он просто выключает смену табов, вот: jsfiddle.net/p1n8tuxd
    – Alexandr
    5 янв 2021 в 14:10
  • Очень странно. У меня что мой пример, что твой работают. Я жму на 5 ссылку и получаю "содержимое 5". Или я не понимаю суть работы? 5 янв 2021 в 16:30
  • Попробуй добавить его на JS Fiddle и нажать RUN, он перестанет менять содержимое в блоке результата. Но да. В примере это каким-то чудом работает. Не знаю с чем это связано...
    – Alexandr
    5 янв 2021 в 16:44
  • Дык я твой код и запускаю на фидле, все норм) Даже не знаю чем еще могу помочь, увы. 5 янв 2021 в 16:54
  • Так а ты сам добавил туда e.preventDefault() ?
    – Alexandr
    5 янв 2021 в 16:54

Ваш ответ

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

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