如图，
$.extend({
nav:function(param,dom){
var len = param.data.length;
var w = param.w || 50;
var h = param.h || 50;
var size = param.size || 12;
var listStyle = {
display:‘inline-block‘,
width:w+‘px‘,marginRight:‘10px‘,
textAlign:‘center‘,
height:h+‘px‘,
lineHeight:h+‘px‘,
cursor:‘pointer‘,
fontSize:size+‘px‘
};
var bStyle = {
position:‘absolute‘,
width:w+‘px‘,
height:‘2px‘,
background:‘red‘,
bottom:‘0px‘,
left:0,
transition:‘all 0.2s‘
}
$(dom).css({position:‘relative‘});
var ul = $("<ul id=‘nav_wrapper‘></ul>");
var bBottom = $("<p class=‘bBottom‘></p>");
bBottom.css(bStyle);
$(dom).append(bBottom);
for(var i = 0; i < len ; i++){
var li = $("<li class=‘nav-list‘></li>");
$(li).attr(‘data-pos‘,i*w+(i*10)+"px")
$(li).css(listStyle)
$(li).text(param.data[i]);
$(li).on(‘click‘,function(e){
$(‘.bBottom‘).css(‘left‘,$(e.target).attr(‘data-pos‘));
})
$(ul).append($(li));
};
$(dom).append($(ul));
}
});
$.nav({
data:[‘aa‘,‘bb‘,‘cc‘],
w:100,
h:60,
size:20
},‘#nav‘);
;
