CSS: добавить рамку с анимацией слева направо | справа налево

В настоящее время я пытаюсь создать контейнер div с вкладками:

На данный момент это выглядит так. Я также могу переключить вкладку. Каждая вкладка имеет класс is-active.

Чтобы показать пользователю, какая вкладка активна, я добавил границу под каждой вкладкой. Когда я сейчас меняю вкладку, граница практически не меняется. Итак, удалили из левого и добавили в правый.

Поскольку это выглядит не очень красиво, я подумал: «Можно ли добавить рамку с анимацией, скользящей слева направо или назад влево при нажатии на заголовок вкладки?»

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

Это мой упрощенный код:

jQuery("ul.tabs li").click(function(){
  var e = jQuery(this).attr("aria-controls");
  jQuery(this).hasClass("active")||(jQuery("li").removeClass("active"),jQuery(this).addClass("active"),jQuery("#"+e).show())})

ul.tabs {
    margin: 0!important;
    padding: 0!important;
    background: #f4f4f4;
    display: flex;
}

ul.tabs li {
  flex-grow: 50;
  list-style: none;
  text-align: center;
  background: #fff;
  line-height: 45px;
  cursor: pointer;
}

ul.tabs li a {
  color: black;
  text-decoration: none;
}

ul.tabs li.active {
    cursor: default;
    border-bottom: 2px solid red;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class = "tabs wc-tabs" role = "tablist">
  <li class = "description_tab active" id = "tab-title-description" role = "tab" aria-controls = "tab-description"> 
    <a href = "#tab-description">Beschreibung</a>
  </li>
  <li class = "reviews_tab" id = "tab-title-reviews" role = "tab" aria-controls = "tab-reviews">
    <a href = "#tab-reviews">Fragen / Antworten</a>
  </li>
</ul>

javascript jquery html css

21.02.2019 17:30

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

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

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

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

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

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

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

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

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

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

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

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

4 844

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

Ответы 1

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

Да, вы можете сделать это, используя дополнительный тег. Назовите это как slider пока.

Итак, теперь при нажатии на ползунок будет двигаться туда-сюда.

Вот код прилагается.

var tabs = document.getElementsByClassName('Tab');

Array.prototype.forEach.call(tabs, function(tab) {
	tab.addEventListener('click', setActiveClass);
});

function setActiveClass(evt) {
	Array.prototype.forEach.call(tabs, function(tab) {
		tab.classList.remove('active');
	});
	
	evt.currentTarget.classList.add('active');
}

.Tabs {
	position: relative;
	background-color: #fff;
	margin: 0;
	padding: 0;
	list-style: none;
}

.Tabs:after {
		content: ' ';
		display: table;
		clear: both;
	}

.description_tab {
		float: left;
		width: 33.333%;
		text-align: center;
	}

.description_tab:first-child.active ~ .slider {
			left: 0;
		}

.description_tab:nth-child(2).active ~ .slider {
			left: 33.333%;
		}

.slider {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 33.333%;
		height: 4px;
		background-color: #4A66F4;
		transition: left .25s;
	}

.Tab {
	font-family: 'Roboto Slab';
}

.Tab > a {
		display: block;
		padding: 10px 12px;
		text-decoration: none;
		color: #666;
		transition: color .15s;
	}

.Tab.active > a {
			color: #222;
		}

.Tab:hover > a {
			color: #222;
		}

<!DOCTYPE html>
<html>
<head>
  <meta charset = "utf-8">
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <meta name = "viewport" content = "width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
<ul class = "Tabs" role = "tablist">
  <li class = "description_tab active Tab" id = "tab-title-description" role = "tab" aria-controls = "tab-description"> 
    <a href = "#tab-description">Beschreibung</a>
  </li>
  <li class = "description_tab Tab" id = "tab-title-reviews" role = "tab" aria-controls = "tab-reviews">
    <a href = "#tab-reviews">Fragen / Antworten</a>
  </li>
<li class = "slider" role = "presentation"></li></ul>
</body>
</html>

Надеюсь, это помогло вам, Спасибо.

Кредиты: с земли на codepen

21.02.2019 18:06