2
私は、要素の位置に基づいて異なるクラスを追加するのが好きです。
他の言葉： 私は6つの要素のリストを持ち、このリストの3番目の要素はアクティブなクラスです。アクティブな要素の後ろにあるすべての要素は、クラスslide-rightを持つ必要があります。彼らの前に来たら、彼らはクラスslide-leftを持っているはずです。
どうすればいいですか？ ご協力いただければ幸いです。現在のクラスを追加しながら
$(document).ready(function() {
// configurator tabs
$('ul.tabs li').click(function() {
var tab_id = $(this).attr('data-tab');
var index = $(".tabs li").index(this);
if (index == 0)
{
$('#previous').addClass('disabled');
}
else if (index + 1 == $(".tabs li").length)
{
$('#next').addClass('disabled');
}
else
{
$('#next').removeClass('disabled');
$('#previous').removeClass('disabled');
}
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
})
// arrow navigation
$('#previous').click(function() {
if($('ul.tabs li.current').prev().length != 0){
$('ul.tabs li.current').removeClass('current').prev().addClass('current').click();
}
})
$('#next').click(function() {
if($('ul.tabs li.current').next().length != 0){
$('ul.tabs li.current').removeClass('current').next().addClass('current').click();
}
})
// keyboard navigation
$("body").keydown(function(e) {
if(e.keyCode == 37) { // 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
if($('ul.tabs li.current').next().length != 0){
$('ul.tabs li.current').removeClass('current').next().addClass('current').click();
}
}
});
});body {
margin-top: 100px;
font-family: 'Trebuchet MS', serif;
line-height: 1.6
}
.container {
width: 800px;
margin: 0 auto;
}
ul.tabs {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li {
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current {
background: #ededed;
color: #222;
}
ul.arrownavigation {
list-style: none;
}
ul.arrownavigation li {
display: inline-block;
background: #111;
color: #fff;
padding: 10px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul.arrownavigation li:active {
background: #444;
}
ul.arrownavigation li.disabled {
opacity: 0.2;
pointer-events: none;
}
.tab-content {
display: none;
background: #ededed;
padding: 15px;
}
.tab-content.current {
display: inherit;
}
.tab-content.slide-left.current{
display: block;
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;}
}
.tab-content.slide-right.current{
display: block;
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>
<div class="container">
<ul class="arrownavigation">
<li id="previous">Previous</li>
<li id="next">Next</li>
</ul>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab 1</li>
<li class="tab-link" data-tab="tab-2">Tab 2</li>
<li class="tab-link" data-tab="tab-3">Tab 3</li>
<li class="tab-link" data-tab="tab-4">Tab 4</li>
<li class="tab-link" data-tab="tab-5">Tab 5</li>
<li class="tab-link" data-tab="tab-6">Tab 6</li>
</ul>
<div id="tab-1" class="tab-content slide-left current">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="tab-2" class="tab-content slide-left">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="tab-3" class="tab-content slide-left">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div id="tab-4" class="tab-content slide-left">
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="tab-5" class="tab-content slide-left">
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="tab-6" class="tab-content slide-left">
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<!-- container -->
多分それは最もエレガントなソリューションではありませんが、あなたは、ポジションを保存するためのリードを別のIDまたはクラスのセットを使用するか、それに応じて変更することができます。 –
あなたはCSSでこれを行うことはできますか？ – epascarello
charlietflの答えは私の解決策のように見えると思います。 –