Alexander Hein Alexander Hein - 1 month ago 8
CSS Question

Add classes based on the position

enter image description here

I like to add different classes to elements, based on the position of them.

In other words:
I have a list of six elements, and the third element of this list has the class active. All elements that come after the active element should have the class

slide-right
. If they come before it, they should have the class
slide-left
.

How could this be done?
Any help would be greatly appreciated.



$(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 -->




Answer

You can use prevAll() and nextAll()

Something like

$('ul.tabs li.current').prevAll().removeClass('slide-right').addClass('slide-left')
Comments