li选中效果（使用了少量CSS3）

（如有错敬请指点，以下是我工作中遇到并且解决的问题）

效果图：
未点击时：

点击后：

HTML代码：

<ul>
    <li class="active">菜单1</li>
    <li>菜单2</li>
    <li>菜单3</li>
    <li>菜单4</li>
    <li>菜单5</li>
    <li>菜单6</li>
    <li class="bar"><i class="active_bg"></i></li>
</ul>

CSS代码：

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
ul{
    height:40px;
    position: relative;
}
ul li{
    width: 16.66666%;
    height: 100%;
    line-height: 44px;
    float: left;
    color: #999;
    font-size: 15px;
    text-align: center;
}
ul .bar{
    width: 16.66666%;
    height: 3px;
    line-height: 0;
    position: absolute;
    left: 0;
    bottom:1px;
    transform: translateX(0%);
    transition:0.2s linear;
    -webkit-transition:0.2s linear;
}
ul .bar i{
    width: 70%;
    height: 3px;0
    display: inline-block;
}
.active {
    color: darkgreen;
}
.active_bg {
    background-color: darkgreen;
}

JQuery代码：

var ali=$('ul li');
var moveF = function(index) {
	ali.each(function(){ali.removeClass('active');})
    $(ali[index]).addClass('active');
    $(ali[ali.length-1]).css('-webkit-transform','translateX(' + index * 100 + '%)');
};
ali.each(function(i){
	ali.unbind('click').click(function(){
		moveF($('ul li').index(this))
	})
})

li选中效果（使用了少量CSS3）

猜你喜欢