我的代码: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>
答案 0 :(得分:4)
更改您的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>
答案 1 :(得分:1)
您的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);
});
现在逐一进行。
现在你告诉iterateLi函数第一次返回108像素而不是108px + 128px(结合第二和第一个li,因为它们来自你的最后一个li,你的指标是默认位置)。你实际上在做的是告诉指标每次只返回100px。
要在另一个变量中修复此传递,该变量计算您想要剩余多少。所以iterateLi看起来像(ord,width,leftBy)。
另外需要注意的是,我不会把你的指标留在最后一个里面。当你声明所有的css相对时,将它设为绝对是没有意义的。将相对于父容器的位置放在你的ul标签上。