滑动效果不第一个选项卡中的＆QUOT工作; UL＆QUOT;元件 [英] Sliding effect doesn't work on first tab in "ul" element

查看：159 发布时间：2016/5/15 21:18:25 javascript jquery html css animation

本文介绍了滑动效果不第一个选项卡中的＆QUOT工作; UL＆QUOT;元件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的codePEN： HTTP：//$c$cpen.io/Chiz/笔/ ZbBdpw

点击二和三标签。该指标滑块工作正常，但是当你点击第一选项卡，指示灯不移动到第一个标签。

 $（文件）。就绪（函数（）{\r
  //更改活动\r
  $（'选项卡菜单里一'）。点击（函数（事件）{\r
    如果（$（本）.parent（礼）。hasClass（激活））{\r
      //没做什么\r
    }其他{\r
      //删除所有活动类\r
      $（本）.closest（UL）找到（礼）removeClass移除（激活）。\r
      //添加活动类选定李\r
      $（本）.parent（礼）addClass（激活）。\r
    }\r
  }）;\r
\r
}）;\r
\r
//计算位置\r
$（'。选项卡菜单李：最后的孩子）追加（'＆LT;跨度类=指示灯＆GT;＆LT; / SPAN＆GT;'）;\r
\r
$（头）追加（'＆LT;风格类=标签＆GT;＆LT; /风格与GT;'）;\r
\r
功能iterateLi（ORD，宽度）{\r
  $（'头style.tabs'）追加（李：第n个孩子（+ ORD +）。主动〜李：最后一个孩子.indicator {-webkit-变换：translate3d（ - +宽+PX ，0,0）;变换：translate3d（ - +宽+PX，0,0）;宽度：+宽+PX}）;\r
}\r
\r
$（文件）。就绪（函数（）{\r
  $（'选项卡菜单'）。子女（礼）。每个（函数（）{\r
    李＆GT; S创建每个CSS //通过在＆lt迭代\r
    VAR ORD = $（本）的.index（）+ 1;\r
    VAR WIDTH = $（本）.WIDTH（）;\r
    iterateLi（ORD，宽度）;\r
  }）;\r
}）;

 UL {\r
  列表样式：无;\r
  显示：inline-block的;\r
  填充：0;\r
  保证金：0;\r
  背景颜色：＃222;\r
}\r
UL李{\r
  显示：块;\r
  浮动：左;\r
  位置：相对;\r
  利润率：2px的;\r
  保证金右：0;\r
}\r
UL李：最后一子{\r
  保证金右：2px的;\r
}\r
UL李一{\r
  位置：相对;\r
  显示：块;\r
  填充：5像素40像素;\r
  颜色：#FFF;\r
  不透明度：.5;\r
  的z-index：10;\r
  -webkit-过渡：全1易于在出;\r
  过渡：全1易于在出;\r
}\r
UL李答：悬停，\r
UL李一：聚焦{\r
  文字修饰：无;\r
  颜色：#FFF;\r
  不透明度：1;\r
}\r
UL li.active一个，\r
UL li.active：悬停，\r
UL li.active:focus {\r
  不透明度：100;\r
  颜色：＃222;\r
}\r
UL李.indicator {\r
  位置：绝对的;\r
  底部：0;\r
  左：0;\r
  宽度：100％;\r
  高度：100％;\r
  背景：#FFF;\r
  内容：'';\r
  -webkit-过渡：-webkit-103S转变;\r
  过渡：变换1000毫秒;\r
}\r
\r
\r
\r
\r
/ *\r
@import URL（https://fonts.googleapis.com/css?family=Lato:400,500）;\r
\r
//简单animaiton混入，在这里阅读更多 -  http://lesscss.org/features/#detached-rulesets-feature\r
@animate：{-webkit-过渡：全1易于在出;过渡：全1易于在出; };\r
\r
UL {\r
  列表样式：无;\r
  显示：inline-block的;\r
  填充：0;\r
  保证金：0;\r
  保证金：100像素;\r
  背景颜色：＃222;\r
  字体重量：500;\r
  文本转换：大写;\r
  字体大小：12像素;\r
  字母间距：2px的;\r
  李{\r
    显示：块;\r
    浮动：左;\r
    位置：相对;\r
    保证金：2px的;\r
    保证金右：0;\r
     @animate（）;\r
    ＆安培;：最后一个孩子{\r
      保证金右：2px的;\r
    }\r
    一个 {\r
      位置：相对;\r
      显示：块;\r
      填充：5像素40像素;\r
      颜色：#FFF;\r
      不透明度：.5;\r
      的z-index：10;\r
       @animate（）;\r
      ＆安培;：悬停，＆安培;：重点{\r
        文字修饰：无;\r
        颜色：#FFF;\r
        不透明度：1;\r
      }\r
    }\r
      ＆安培;。主动{\r
      一，答：悬停，＆安培;：重点{\r
        不透明度：100;\r
        颜色：＃222;\r
      }\r
    }\r
    .indicator {\r
        位置：绝对的;\r
        底部：0;\r
        左：0;\r
        宽度：100％;\r
        高度：100％;\r
        背景：#FFF;\r
        内容：'';\r
        -webkit-过渡：-webkit-103S转变;\r
        过渡：变换1000毫秒;\r
    }\r
  }\r
}\r
* /

＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js\"></script>\r
\r
＆LT; UL类=标签菜单＆GT;\r
  ＆LT;立GT;＆LT; A HREF =＃＆gt;首先＆LT; / A＆GT;＆LT; /李＆GT;\r
  ＆LT;立GT;＆LT; A HREF =＃＆gt;第二个＆LT; / A＆GT;＆LT; /李＆GT;\r
  ＆LT;立GT;＆LT; A HREF =＃＆GT;三＆LT; / A＆GT;＆LT; /李＆GT;\r
＆LT; / UL＆GT;

解决方案

改变你的jQuery的code

 $（文件）。就绪（函数（）{\r
\r
        $（'选项卡菜单里）。每个（函数（）{\r
            VAR ORD = $（本）的.index（）+ 1;\r
            VAR WIDTH = $（本）.WIDTH（）;\r
            $（本）。点击（函数（）{\r
                VAR WIDTH = $（本）.WIDTH（）;\r
                VAR nextWidth = 0\r
                $（本）.nextAll（）每个（函数（）{nextWidth + = $（本）.WIDTH（）;}）;\r
                VAR widthtes = nextWidth;\r
                iterateLi（ORD，widthtes，宽度）;\r
                的console.log（widthtes）;\r
                的console.log（宽）;\r
                如果（$（本）.hasClass（激活））{\r
                    //没做什么\r
                }其他{\r
                    //删除所有活动类\r
                    $（本）.closest（UL）找到（礼）removeClass移除（激活）。\r
                    //添加活动类选定李\r
                    $（本）.addClass（激活）;\r
                }\r
            }）;\r
        }）;\r
    }）;\r
\r
    //计算位置\r
    $（'。选项卡菜单李：最后的孩子）追加（'＆LT;跨度类=指示灯＆GT;＆LT; / SPAN＆GT;'）;\r
\r
    $（头）追加（'＆LT;风格类=标签＆GT;＆LT; /风格与GT;'）;\r
\r
    功能iterateLi（ORD，widthtes，宽度）{\r
        $（'头style.tabs'）追加（李：第n个孩子（+ ORD +）。主动〜李：最后一个孩子.indicator {-webkit-变换：translate3d（ - + widthtes +PX ，0,0）;变换：translate3d（ - + widthtes +PX，0,0）;宽度：+宽+PX}）;\r
    }

 UL {\r
        列表样式：无;\r
        显示：inline-block的;\r
        填充：0;\r
        保证金：0;\r
        背景颜色：＃222;\r
    }\r
\r
        UL李{\r
            显示：块;\r
            浮动：左;\r
            位置：相对;\r
            保证金右：0;\r
        }\r
\r
            UL李：最后一子{\r
            }\r
\r
            UL李一{\r
                位置：相对;\r
                显示：块;\r
                填充：5像素40像素;\r
                颜色：#FFF;\r
                不透明度：.5;\r
                的z-index：10;\r
                -webkit-过渡：全1易于在出;\r
                过渡：全1易于在出;\r
            }\r
\r
                UL李答：悬停，\r
                UL李一：聚焦{\r
                    文字修饰：无;\r
                    颜色：#FFF;\r
                    不透明度：1;\r
                }\r
\r
            UL li.active一个，\r
            UL li.active：悬停，\r
            UL li.active:focus {\r
                不透明度：100;\r
                颜色：＃222;\r
            }\r
\r
            UL李.indicator {\r
                位置：绝对的;\r
                底部：0;\r
                左：0;\r
                宽度：100％;\r
                高度：100％;\r
                背景：#FFF;\r
                内容：'';\r
                -webkit-过渡：-webkit-103S转变;\r
                过渡：变换1000毫秒;\r
            }\r
\r
\r
\r
\r
/ *\r
@import URL（https://fonts.googleapis.com/css?family=Lato:400,500）;\r
\r
//简单animaiton混入，在这里阅读更多 -  http://lesscss.org/features/#detached-rulesets-feature\r
@animate：{-webkit-过渡：全1易于在出;过渡：全1易于在出; };\r
\r
UL {\r
  列表样式：无;\r
  显示：inline-block的;\r
  填充：0;\r
  保证金：0;\r
  保证金：100像素;\r
  背景颜色：＃222;\r
  字体重量：500;\r
  文本转换：大写;\r
  字体大小：12像素;\r
  字母间距：2px的;\r
  李{\r
    显示：块;\r
    浮动：左;\r
    位置：相对;\r
    保证金：2px的;\r
    保证金右：0;\r
     @animate（）;\r
    ＆安培;：最后一个孩子{\r
      保证金右：2px的;\r
    }\r
    一个 {\r
      位置：相对;\r
      显示：块;\r
      填充：5像素40像素;\r
      颜色：#FFF;\r
      不透明度：.5;\r
      的z-index：10;\r
       @animate（）;\r
      ＆安培;：悬停，＆安培;：重点{\r
        文字修饰：无;\r
        颜色：#FFF;\r
        不透明度：1;\r
      }\r
    }\r
      ＆安培;。主动{\r
      一，答：悬停，＆安培;：重点{\r
        不透明度：100;\r
        颜色：＃222;\r
      }\r
    }\r
    .indicator {\r
        位置：绝对的;\r
        底部：0;\r
        左：0;\r
        宽度：100％;\r
        高度：100％;\r
        背景：#FFF;\r
        内容：'';\r
        -webkit-过渡：-webkit-103S转变;\r
        过渡：变换1000毫秒;\r
    }\r
  }\r
}\r
* /

＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js\"></script>\r
\r
＆LT，UL类=标签菜单＆GT;\r
  ＆LT;立GT;＆LT; A HREF =＃＆gt;首先＆LT; / A＆GT;＆LT; /李＆GT;\r
  ＆LT;立GT;＆LT; A HREF =＃GT和;其二＆LT; / A＆GT;＆LT; /李GT及;\r
  ＆LT;立GT;＆LT; A HREF =＃＆GT;三＆LT; / A＆GT;＆LT; /李＆GT;\r
＆LT; / UL＆GT;

演示：的http：//$c$cpen.io/anon/pen/RWoXWy

My codepen: http://codepen.io/Chiz/pen/ZbBdpw

Click on the "Second" and "Third" tab. The indicator slider works fine, but when you click the "First" tab, the indicator doesn't move to that first tab.

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

解决方案

Change Your Jquery Code

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

Demo : http://codepen.io/anon/pen/RWoXWy

这篇关于滑动效果不第一个选项卡中的＆QUOT工作; UL＆QUOT;元件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

滑动效果不第一个选项卡中的＆QUOT工作; UL＆QUOT;元件 [英] Sliding effect doesn't work on first tab in "ul" element

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

滑动效果不第一个选项卡中的＆QUOT工作; UL＆QUOT;元件 [英] Sliding effect doesn&#39;t work on first tab in &quot;ul&quot; element

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

滑动效果不第一个选项卡中的＆QUOT工作; UL＆QUOT;元件 [英] Sliding effect doesn't work on first tab in "ul" element

登录关闭