Структура URL для вкладок

Поскольку у меня проблема со структурой URL на вкладках. если я выбрал tab-2 и url изменен на https://example.com/#tab-2 и для таба-3 https://example.com/#tab-3 и т.д.

Проблема в том, что если я ввел этот https://example.com/#tab-4 или любой другой, в строке поиска он всегда показывает мне https://example.com/#tab-1 как текущий.

Но, я бы хотел сделать https://example.com/#tab-4 тока мне показывает tab-4 выбранный. Как бы я реализовал в своем текущем коде?

$('.projects_select').click(function(){
        var tab_id = $(this).attr('data-tab');
        $('.projects_select').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
      //  window.location.href = window.location.href+"#tab_id";
    });

.tab-content {
  display: block;    /* undo display:none          */
  height: 0;         /* height:0 is also invisible */ 
  overflow: hidden;  }

.tab-content.current {
  height: auto;      /* let the content decide it  */ }

.projects_select {
  font-weight: 400;
  letter-spacing: 1px;
  text-align: center;
  color: #333;
  padding: 17px 0;
  width: 16.66%;
  float: left;
  cursor: pointer;
  border-style: solid;
  border-width: 1px 1px 1px 0px;
  font-style: normal;
  font-weight: 700; }


.projects_select.current {
  font-weight: 500;
  position: relative;
  color: #fff;
  background: #313641; }

.projects_select.current:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-top-color: #333;
  border-width: 20px;
  margin-left: -20px;
  }

.tab_Menu{
  padding: 35px 10.7% 75px;
  background: #efefef;  }

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class = "wrapper tab_Menu">
   <a class = "projects_select tab-link current" data-tab = "tab-1" href = "#tab-1"> Tab-1 </a>
   <a class = "projects_select tab-link" data-tab = "tab-2" href = "#tab-2"> Tab-2 </a>
   <a class = "projects_select tab-link" data-tab = "tab-3" href = "#tab-3"> Tab-3 </a>
   <a class = "projects_select tab-link" data-tab = "tab-4" href = "#tab-4"> Tab-4 </a>
   <a class = "projects_select tab-link" data-tab = "tab-5" href = "#tab-5"> Tab-5 </a>
</div>
    
<div class = "tab-content current" id = "tab-1"> Tab-1 </div>
<div class = "tab-content" id = "tab-2"> Tab-2 </div>
<div class = "tab-content" id = "tab-3"> Tab-3 </div>
<div class = "tab-content" id = "tab-4"> Tab-4 </div>
<div class = "tab-content" id = "tab-5"> Tab-5 </div>

javascript jquery html css tabs

06.02.2019 16:37

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете получить хэш с помощью window.location.hash. Итак, в вашем сценарии вы можете сделать что-то вроде этого:

$(document).ready(function(){
    if ($('.tab-link[href=' + window.location.hash + ']')){
        $('.tab-link[href=' + window.location.hash + ']').addClass('current');
    }
    else {
        $('.tab-link[href=#tab1]').addClass('current');
    }
});

Не тестировал этот код. Вам больше не нужно устанавливать текущий класс в HTML. Там можно удалить.

06.02.2019 16:44

Другие вопросы по теме

Я не могу переместить элемент на последнюю позицию и первую позицию

Как автоматически рассчитать цену и количество, а затем отобразить результат? АЯКС PHP

Параметры Jquery select2 конфликтуют, когда существует более одного поля выбора

Динамическая функция slideToggle с заданными параметрами идентификатора класса html

Щелчок не вызывает клик

Как получить идентификатор выбранного значения из выпадающего списка и отправить его модальному в php с помощью ajax?

Как получить результаты поиска из SOLR с помощью Jquery

Почему класс select возвращает неопределенное значение?

Класс добавления/удаления JQuery не работает должным образом

Привязка массива объектов к множественному выбору всплывающего окна сетки кендо

Структура URL для вкладок

Ответы 1

Другие вопросы по теме

Похожие вопросы