Question

我喜欢根据元素的位置为元素添加不同的类。

换句话说：我有一个包含六个元素的列表，这个列表的第三个元素是活动的类。活动元素之后的所有元素都应该具有类slide-right。如果他们来到它之前，他们应该有班级slide-left。

怎么可以这样做？任何帮助将不胜感激。

＆＃13;

$(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();
      }
    }
  });

});

＆＃13;

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;}
}

＆＃13;

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

＆＃13;

Answer 1

您可以使用prevAll()和nextAll()

像

这样的东西

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

Answer 2

在添加当前类

时应用prevAll和nextAll的另一种选择

   $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current').removeClass('slide-right slide-left');
    $("#" + tab_id).addClass('current');
     $(this).prevAll().addClass('slide-left').removeClass('slide-right');
     $(this).nextAll().addClass('slide-right').removeClass('slide-left');
})

http://codepen.io/nagasai/pen/RGrzaB

根据位置添加类

2 个答案: