2
我有两个选项卡导航，我喜欢并排运行它们。 第一个很好地适用于自己，但是当我复制它时，我遇到了问题。对于多个对象jQuery相同的功能
如何让此标签导航并排工作？
任何帮助将不胜感激。
$(document).ready(function() {
// configurator tabs
$('.tab-link').click(function() {
var tab_id = $(this).attr('data-tab');
var tab_id_input = $(this).children("input");
$('ul.tabs li').removeClass('current');
$('ul.tabs li input').prop('checked', false).removeAttr('checked');
$('.variant--group').removeClass('current');
$("." + tab_id).addClass('current');
$(tab_id_input).prop('checked', true).attr('checked', 'checked');
$("#" + tab_id).addClass('current');
$('.variant--group.current').prevAll().removeClass('slide-left slide-right').addClass('slide-left');
$('.variant--group.current').nextAll().removeClass('slide-left slide-right').addClass('slide-right');
})
// arrow navigation
$('#previous').click(function() {
$('.variant--group.current').prevAll().removeClass('slide-left slide-right').addClass('slide-left');
if ($('ul.tabs li.current').prev().length != 0) {
$('ul.tabs li.current').removeClass('current').prev().addClass('current').click();
}
})
$('#next').click(function() {
$('.variant--group.current').nextAll().removeClass('slide-left slide-right').addClass('slide-right');
if ($('ul.tabs li.current').next().length != 0) {
$('ul.tabs li.current').removeClass('current').next().addClass('current').click();
}
})
$('#resp-button').click(function() {
$('.product--detail-upper').addClass("show");
$('body').addClass("fixed");
})
$('.product--detail-upper').on('click', function(e) {
if (e.target !== this)
return;
$('.product--detail-upper').removeClass("show");
$('body').removeClass("fixed");
});
// keyboard navigation
$("body").keydown(function(e) {
if (e.keyCode == 37) { // left
$('.variant--group.current').prevAll().removeClass('slide-left slide-right').addClass('slide-left');
if ($('ul.tabs li.current').prev().length != 0) {
$('ul.tabs li.current').removeClass('current').prev().addClass('current').click();
}
} else if (e.keyCode == 39) { // right
$('.variant--group.current').nextAll().removeClass('slide-left slide-right').addClass('slide-right');
if ($('ul.tabs li.current').next().length != 0) {
$('ul.tabs li.current').removeClass('current').next().addClass('current').click();
}
}
});
});.body {
background: #111;
}
.tabscontain {
width: 100%;
height: 60px;
}
.tabs li {
background: #f6f7f9;
border-bottom: 1px solid #e8e8e8;
display: inline-block;
padding: 0 30px;
margin-right: -5px;
font-weight: 700;
font-size: 14px;
line-height: 60px;
cursor: pointer;
text-transform: uppercase;
}
.tabs li.current {
background: #ffffff;
border-color: #ffffff;
color: #09c;
}
.arrows {
position: absolute;
right: 40px;
top: -130px;
}
.arrow {
background: #30373b;
color: #fff;
padding: 10px 12px;
font-size: 20px;
display: inline-block;
cursor: pointer;
}
.arrow:active {
background: #222222;
}
.variant--group {
display: none;
min-height: 190px;
padding: 60px 30px;
text-align: center;
}
.variant--group.current {
display: block;
opacity: 1;
}
.variant--group.slide-left.current {
opacity: 0;
transform: translateX(-100px);
animation: slide-left 0.4s ease forwards;
}
@-webkit-keyframes slide-left {
to {
transform: translateX(0);
opacity: 1;
}
}
@-moz-keyframes slide-left {
to {
transform: translateX(0);
opacity: 1;
}
}
@-o-keyframes slide-left {
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-left {
to {
transform: translateX(0);
opacity: 1;
}
}
.variant--group.slide-right.current {
opacity: 0;
transform: translateX(100px);
animation: slide-right 0.4s ease forwards;
}
@-webkit-keyframes slide-right {
to {
transform: translateX(0);
opacity: 1;
}
}
@-moz-keyframes slide-right {
to {
transform: translateX(0);
opacity: 1;
}
}
@-o-keyframes slide-right {
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-right {
to {
transform: translateX(0);
opacity: 1;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- First Tab -->
<div class="custom-slide">
<div class="arrows slide-left">
<div id="previous" class="arrow">Zurück</div>
<div id="next" class="arrow">Weiter</div>
</div>
<div class="tabscontain slide-left">
<ul class="tabs">
<li class="tab-link 1 current" data-tab="1">option 1</li>
<li class="tab-link 2" data-tab="2">option 2</li>
<li class="tab-link 3" data-tab="3">option 3</li>
</ul>
</div>
<div class="variant--group slide-left current" id="1">
<div class="descript">
<h2>option 1</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
</div>
</div>
<div class="variant--group slide-left current" id="2">
<div class="descript">
<h2>option 2</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
</div>
</div>
<div class="variant--group slide-left current" id="3">
<div class="descript">
<h2>option 3</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
</div>
</div>
</div>
<!-- Second Tab -->
<div class="custom-slide">
<div class="arrows slide-left">
<div id="previous" class="arrow">Zurück</div>
<div id="next" class="arrow">Weiter</div>
</div>
<div class="tabscontain slide-left">
<ul class="tabs">
<li class="tab-link 4 current" data-tab="4">option 3</li>
<li class="tab-link 5" data-tab="5">option 4</li>
<li class="tab-link 6" data-tab="6">option 5</li>
</ul>
</div>
<div class="variant--group slide-left current" id="4">
<div class="descript">
<h2>option 4</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
</div>
</div>
<div class="variant--group slide-left current" id="5">
<div class="descript">
<h2>option 5</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
</div>
</div>
<div class="variant--group slide-left current" id="6">
<div class="descript">
<h2>option 6</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
</div>
</div>
</div>