Question

我是js和jquery的新手。
我有标签代码，其中包括左右箭头。
如果我选择向右箭头，则显示移动到下一个带有平滑滑动的标签。
如果我选择左箭头，则显示移动到下一个带有平滑滑动的标签。
即使标签内容也应该更改。
你能告诉我如何解决它。
在下面提供我的代码。

https://codepen.io/texirv/pen/MvXZQX?editors=1111

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}



  $('.left').click(function(){

    console.log("I am testing");

  })

Answer 1

您需要找到当前有效标签，然后根据点击的按钮点击下一个/上一页标签。

以下是您可以使用的代码示例：

  $('.left').click(function(){
    move('left');
  })
  $('.right').click(function(){
    move('right');
  })
  function move(to) {
    var current = $('li.current').index();
    var total = $('.tabs .tab-link').length;
    var add;
    switch (to) {
      case 'left':
        add = -1;
        break;
      case 'right':
        add = 1;
        break;
    }
    $('.tabs li.tab-link').eq((current+add)%total).click();
  }

这是基于您的codepen的更新：
https://codepen.io/anon/pen/XaYGRM

用左右滑动标签

1 个答案: