У меня есть этот код, который может генерировать симпатичные вкладки.JavaScript отвечает за переключение вкладок, но я с трудом пытаюсь скрыть / показать содержимое во время переключения вкладок.
Как лучше всего это сделать?Также, если возможно, я бы хотел избежать использования href.Я заметил в некоторых других реализациях вкладок, что когда используется href, а вкладки не находятся вверху страницы (например, есть логотипы и некоторые другие вещи), когда вы нажимаете на них, это создает вкладки вверху (какв логотипах будут скрыты, поэтому вам нужно прокрутить вверх, чтобы увидеть их).Конечно, это происходит только в том случае, если содержание на странице достаточно велико.
Извините за мой язык, но я не парень CSS / JS / HTML, поэтому я довольно уверен, что смешиваю некоторые вещи.
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://use.fontawesome.com/releases/v5.0.13/css/all.css');
body {
font-family: 'Roboto', sans-serif;
}
.wrapper {
text-align: center;
margin: 50px auto;
}
.tabs {
margin-top: 50px;
font-size: 15px;
padding: 0px;
list-style: none;
background: #fff;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
display: inline-block;
border-radius: 50px;
position: relative;
}
.tabs a {
text-decoration: none;
color: #777;
text-transform: uppercase;
padding: 10px 20px;
display: inline-block;
position: relative;
z-index: 1;
transition-duration: 0.6s;
}
.tabs a.active {
color: #fff;
}
.tabs a i {
margin-right: 5px;
}
.tabs .selector {
height: 100%;
display: inline-block;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
border-radius: 50px;
transition-duration: 0.6s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
background: #05abe0;
background: -moz-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
background: -webkit-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
background: linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#05abe0', endColorstr='#8200f4', GradientType=1);
}
.tabs-content {
display: none;
}
.tabs-content.active {
display: block;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<nav class="tabs">
<div class="selector"></div>
<a href="#" class="active"><i class="fas fa-burn"></i>Avengers</a>
<a href="#"><i class="fas fa-bomb"></i>Guardians of The Galaxy</a>
<a href="#"><i class="fas fa-bolt"></i>Thor</a>
<a href="#"><i class="fab fa-superpowers"></i>Black Panther</a>
</nav>
</div>
<div class="tabs-content active" id="content1">
<p>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder
bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</p>
<p>
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs
pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
</p>
</div>
<div class="tabs-content" id="content2">
<p>
Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken.
Pork
belly meatball t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle.
Pig
swine chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham
hock.
Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork chop
ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank. Doner
rump
frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami beef ribs.
</p>
<p>
Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket
beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef
kevin
tail meatball pastrami prosciutto pancetta. Tail kevin spare ribs ground round ham ham hock brisket
shoulder.
Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey.
</p>
</div>
<script type="text/javascript">
var tabs = $('.tabs');
var items = $('.tabs').find('a').length;
var selector = $(".tabs").find(".selector");
var activeItem = tabs.find('.active');
var activeWidth = activeItem.innerWidth();
$(".selector").css({
"left": activeItem.position.left + "px",
"width": activeWidth + "px"
});
$(".tabs").on("click", "a", function (e) {
e.preventDefault();
$('.tabs a').removeClass("active");
$(this).addClass('active');
var activeWidth = $(this).innerWidth();
var itemPos = $(this).position();
$(".selector").css({
"left": itemPos.left + "px",
"width": activeWidth + "px"
});
});
</script>