Как вариант - использовать псевдокласс :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>