0

Возник вот такой вопрос. Концепция в том, что при нажатии на кнопку, она должна остаться с теми стилями, что и при hover. При нажатии на следующую ссылку то же самое, но у предыдущей стиль возвращался к исходному. Через focus сделать не получается. Подскажите, кто может, пожалуйста. Фото прилагаю.

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

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

.tabsLink {
  position: absolute;
  margin-top: 55px;
}

.tabsLink a {
  user-select: none;
  padding: 5px 0 5px 15px;
  color: #2196f3;
  text-decoration: none;
  border: 1px solid #2196f3;
  border-radius: 20px;
  width: 70px;
  display: block;
  margin-top: 7px;
  transition: .3s ease;
}

.tabsLink a:hover {
  padding: 5px 0 5px 25px;
  width: 80px;
  transition: .3s ease;
}

.tabsLink li:focus~a {
  padding: 5px 0 5px 25px;
  width: 80px;
  transition: .3s ease;
}
<div class="tabsLink">
  <ul>
    <li><a href="#okk">ОКК</a></li>
    <li><a href="#ooa">OOA</a></li>
    <li><a href="#otp">ОТП</a></li>
  </ul>
</div>

1 ответ 1

1

Как вариант - использовать псевдокласс :target

.tabsLink {
  position: absolute;
  margin-top: 55px;
}

.tabsLink a {
  user-select: none;
  padding: 5px 0 5px 15px;
  color: #2196f3;
  text-decoration: none;
  border: 1px solid #2196f3;
  border-radius: 20px;
  width: 70px;
  display: block;
  margin-top: 7px;
  transition: .3s ease;
}

.tabsLink a:hover {
  padding: 5px 0 5px 25px;
  width: 80px;
  transition: .3s ease;
}

.tabsLink a:target {
  padding: 5px 0 5px 25px;
  width: 80px;
}
<div class="tabsLink">
  <ul>
    <li><a id="okk" href="#okk">ОКК</a></li>
    <li><a id="ooa" href="#ooa">OOA</a></li>
    <li><a id="otp" href="#otp">ОТП</a></li>
  </ul>
</div>

Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, в адресе http://www.w3.org/TR/css3-selectors/#target-pseudo происходит переход к элементу, атрибут id которого задан как target-pseudo. Такая запись адреса называется «целевой элемент». Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.

Источник: Псевдокласс :target | htmlbook.ru


Реализация на JQ

Вариант с "единичным выбором"

$('.tabsLink a').on('click', function(){
  // Ниже условие, которое НЕ даёт выполнять действие, если "нажатая" ссылка имеет класс "active"
  if(!$(this).hasClass('active')) {
    // Найдём "активную" ссылку и удалим у неё класс active
    $(this) // обращаемся к текущему элементу
      .closest('.tabsLink') // вызвращаемся подереву назад до .tabsLink
      .find('a.active') // Ищем ссылку с классом "active"
      .removeClass('active'); // Удаляем класс "active"
      
    // Вешаем нажатой ссылке класс "active" 
    $(this).addClass('active');
  }
  return false; // отключаем переход по ссылке
});
.tabsLink {
  position: absolute;
  margin-top: 55px;
}

.tabsLink a {
  user-select: none;
  padding: 5px 0 5px 15px;
  color: #2196f3;
  text-decoration: none;
  border: 1px solid #2196f3;
  border-radius: 20px;
  width: 70px;
  display: block;
  margin-top: 7px;
  transition: .3s ease;
}

.tabsLink a:hover, /* т.к. у "активной ссылки" стили такие же как и при наведение, то совместим свойства для действия "hover" и класса "active" */
.tabsLink a.active {
  padding: 5px 0 5px 25px;
  width: 80px;
  transition: .3s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--  -->
<div class="tabsLink">
  <ul>
    <li><a href="#okk">ОКК</a></li>
    <li><a href="#ooa">OOA</a></li>
    <li><a href="#otp">ОТП</a></li>
  </ul>
</div>

Вариант с "мульти-выбором"

$('.tabsLink a').on('click', function(){
  // > Тут гораздо проще, чем в предыдущем варианте.
  // .toggleClass позваляет удалять\добавлять класс на элемент, в зависимости от того, есть ли такой класс там или нету.
  $(this).toggleClass('active');
  return false; // отключаем переход по ссылке
});
.tabsLink {
  position: absolute;
  margin-top: 55px;
}

.tabsLink a {
  user-select: none;
  padding: 5px 0 5px 15px;
  color: #2196f3;
  text-decoration: none;
  border: 1px solid #2196f3;
  border-radius: 20px;
  width: 70px;
  display: block;
  margin-top: 7px;
  transition: .3s ease;
}

.tabsLink a:hover, /* т.к. у "активной ссылки" стили такие же как и при наведение, то совместим свойства для действия "hover" и класса "active" */
.tabsLink a.active {
  padding: 5px 0 5px 25px;
  width: 80px;
  transition: .3s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--  -->
<div class="tabsLink">
  <ul>
    <li><a href="#okk">ОКК</a></li>
    <li><a href="#ooa">OOA</a></li>
    <li><a href="#otp">ОТП</a></li>
  </ul>
</div>

6
  • Будет ли .tabsLink a:target зависеть от родительского элемента? К примеру div class="tabsLink" лежит в родителе со стилями: .tabs_add{ position: absolute; top: 15%; left: 50%; width: 100%; transform: translateX(-50%); justify-content: center; } Вопрос к тому, что у меня, к сожалению target не работает(
    – Glechik
    16 фев 2019 в 18:27
  • Скорее всего что-то не так писали, ибо он :target не зависит от стилей родителя, ну только в том случае, если будет так .tabs_add .tabsLink a:target {}
    – De.Minov
    16 фев 2019 в 18:33
  • Да, действительно, не так прописал. Дело в том, что ссылки на id уже прикреплены. Это работает посредством "вкладок". Таким образом, id="okk" и тд уже прикреплены к ссылкам, но в другом месте( Если сделать так как вы, то все работает, но вкладки уже не открывает. Кроме таргета есть еще вариант, либо можно ли как-то доработать?
    – Glechik
    16 фев 2019 в 18:41
  • Я бы не стал заморачиваться над таргетами и написал бы на JS\JQ.
    – De.Minov
    16 фев 2019 в 18:53
  • К сожалению, знания пока не позволяют. Можете помочь? Если вас не затруднит, конечно
    – Glechik
    16 фев 2019 в 18:54

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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