滑动效果在“ul”元素的第一个选项卡上不起作用

Question

我的代码：http://codepen.io/Chiz/pen/ZbBdpw

单击“第二个”和“第三个”选项卡。指示器滑块工作正常，但单击“第一个”选项卡时，指示器不会移动到第一个选项卡。

$(document).ready(function() {
  //change active
  $('.tab-menu li a').click(function(event) {
    if ($(this).parent('li').hasClass('active')) {
      //do nothing
    } else {
      //remove all active classes
      $(this).closest('ul').find('li').removeClass('active');
      //add active class to selected li
      $(this).parent('li').addClass('active');
    }
  });

});

// Calculating position
$('.tab-menu li:last-child').append('<span class="indicator"></span>');

$("head").append('<style class="tabs"></style>');

function iterateLi(ord, width) {
  $('head style.tabs').append("li:nth-child(" + ord + ").active ~ li:last-child .indicator { -webkit-transform: translate3d(-" + width + "px,0,0); transform: translate3d(-" + width + "px,0,0); width: " + width + "px}");
}

$(document).ready(function() {
  $('.tab-menu').children('li').each(function() {
    // Iterating through the <li>s creating for each CSS
    var ord = $(this).index() + 1;
    var width = $(this).width();
    iterateLi(ord, width);
  });
});

ul {
  list-style: none;
  display: inline-block;
  padding: 0;
  margin: 0;
  background-color: #222;
}
ul li {
  display: block;
  float: left;
  position: relative;
  margin: 2px;
  margin-right: 0;
}
ul li:last-child {
  margin-right: 2px;
}
ul li a {
  position: relative;
  display: block;
  padding: 5px 40px;
  color: #fff;
  opacity: .5;
  z-index: 10;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
ul li a:hover,
ul li a:focus {
  text-decoration: none;
  color: #fff;
  opacity: 1;
}
ul li.active a,
ul li.active a:hover,
ul li.active:focus {
  opacity: 100;
  color: #222;
}
ul li .indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  content: '';
  -webkit-transition: -webkit-transform 103s;
  transition: transform 1000ms;
}




/*
@import url(https://fonts.googleapis.com/css?family=Lato:400,500);

//simple animaiton mixin, read more here - http://lesscss.org/features/#detached-rulesets-feature
@animate: { -webkit-transition: all 1s ease-in-out;  transition: all 1s ease-in-out; };

ul {
  list-style: none;
  display: inline-block;
  padding: 0;
  margin: 0;
  margin: 100px;
  background-color: #222;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 2px;
  li {
    display: block;
    float: left;
    position: relative;
    margin: 2px;
    margin-right: 0;
     @animate(); 
    &:last-child {
      margin-right: 2px;
    }
    a {
      position: relative;
      display: block;
      padding: 5px 40px;
      color: #fff;
      opacity: .5;
      z-index: 10;
       @animate(); 
      &:hover, &:focus {
        text-decoration: none;
        color: #fff;
        opacity: 1;
      }
    }
      &.active {
      a, a:hover, &:focus {
        opacity: 100;
        color: #222;
      }
    }
    .indicator {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        content: '';
        -webkit-transition: -webkit-transform 103s;
        transition: transform 1000ms;
    }
  }
}
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="tab-menu">
  <li><a href="#">First</a></li>
  <li><a href="#">Second</a></li>
  <li><a href="#">Third</a></li>
</ul>

Answer 1

更改您的Jquery代码

$(document).ready(function () {

        $('.tab-menu li').each(function () {
            var ord = $(this).index() + 1;
            var width = $(this).width();
            $(this).click(function () {
                var width = $(this).width();
                var nextWidth = 0
                $(this).nextAll().each(function () { nextWidth += $(this).width(); });
                var widthtes = nextWidth;
                iterateLi(ord, widthtes, width);
                console.log(widthtes);
                console.log(width);
                if ($(this).hasClass('active')) {
                    //do nothing
                } else {
                    //remove all active classes
                    $(this).closest('ul').find('li').removeClass('active');
                    //add active class to selected li
                    $(this).addClass('active');
                }
            });
        });
    });

    // Calculating position
    $('.tab-menu li:last-child').append('<span class="indicator"></span>');

    $("head").append('<style class="tabs"></style>');

    function iterateLi(ord, widthtes, width) {
        $('head style.tabs').append("li:nth-child(" + ord + ").active ~ li:last-child .indicator { -webkit-transform: translate3d(-" + widthtes + "px,0,0); transform: translate3d(-" + widthtes + "px,0,0); width: " + width + "px}");
    }

ul {
        list-style: none;
        display: inline-block;
        padding: 0;
        margin: 0;
        background-color: #222;
    }

        ul li {
            display: block;
            float: left;
            position: relative;
            margin-right: 0;
        }

            ul li:last-child {
            }

            ul li a {
                position: relative;
                display: block;
                padding: 5px 40px;
                color: #fff;
                opacity: .5;
                z-index: 10;
                -webkit-transition: all 1s ease-in-out;
                transition: all 1s ease-in-out;
            }

                ul li a:hover,
                ul li a:focus {
                    text-decoration: none;
                    color: #fff;
                    opacity: 1;
                }

            ul li.active a,
            ul li.active a:hover,
            ul li.active:focus {
                opacity: 100;
                color: #222;
            }

            ul li .indicator {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: #fff;
                content: '';
                -webkit-transition: -webkit-transform 103s;
                transition: transform 1000ms;
            }




/*
@import url(https://fonts.googleapis.com/css?family=Lato:400,500);

//simple animaiton mixin, read more here - http://lesscss.org/features/#detached-rulesets-feature
@animate: { -webkit-transition: all 1s ease-in-out;  transition: all 1s ease-in-out; };

ul {
  list-style: none;
  display: inline-block;
  padding: 0;
  margin: 0;
  margin: 100px;
  background-color: #222;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 2px;
  li {
    display: block;
    float: left;
    position: relative;
    margin: 2px;
    margin-right: 0;
     @animate(); 
    &:last-child {
      margin-right: 2px;
    }
    a {
      position: relative;
      display: block;
      padding: 5px 40px;
      color: #fff;
      opacity: .5;
      z-index: 10;
       @animate(); 
      &:hover, &:focus {
        text-decoration: none;
        color: #fff;
        opacity: 1;
      }
    }
      &.active {
      a, a:hover, &:focus {
        opacity: 100;
        color: #222;
      }
    }
    .indicator {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        content: '';
        -webkit-transition: -webkit-transform 103s;
        transition: transform 1000ms;
    }
  }
}
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="tab-menu">
  <li><a href="#">First</a></li>
  <li><a href="#">Second</a></li>
  <li><a href="#">Third</a></li>
</ul>

演示：http://codepen.io/anon/pen/RWoXWy

Answer 2

您的css中似乎有这个代码：

li:nth-child(2).active ~ li:last-child .indicator {
    -webkit-transform: translate3d(-128px,0,0);
    transform: translate3d(-128px,0,0);
    width: 128px;
}

错误在你的主要js函数中，你调用iterateLi：

function iterateLi(ord, width) {
$('head style.tabs')
    .append(
        'li:nth-child(' + ord + ').active ~ li:last-child .indicator { -webkit-transform: translate3d(-' + width + 'px,0,0); transform: translate3d(-' + width + 'px,0,0); width: ' + width + 'px}'
    );
}

$('.tab-menu').children('li').each(function () {
    var ord = $(this).index() + 1;
    var width = $(this).width();
    iterateLi(ord, width);
});

现在逐一进行。

• 第一个li传递为：ord = 1，width = 108px
• 第二个li传递为：ord = 2，width = 128px
• 第三个li通过：ord = 3，width = 113px

现在你告诉iterateLi函数第一次返回108像素而不是108px + 128px（结合第二和第一个li，因为它们来自你的最后一个li，你的指标是默认位置）。你实际上在做的是告诉指标每次只返回100px。

要在另一个变量中修复此传递，该变量计算您想要剩余多少。所以iterateLi看起来像（ord，width，leftBy）。

另外需要注意的是，我不会把你的指标留在最后一个里面。当你声明所有的css相对时，将它设为绝对是没有意义的。将相对于父容器的位置放在你的ul标签上。