html表格导航栏翻页,交互式滑动导航+table切换

var head_li = $('.head ul li');

var off = $('.off-tale ul li');

var index_input = $('#index_input').val();

var head_li_width = head_li.width();

var head_li_height = head_li.height();

var ON = $('.on');

ON.css({

'width': head_li_width + 'px',

'height': head_li_height + 'px',

})

ON.animate({

left: index_input * head_li_width + 'px',

})

head_li.on({

click: function() {

var _this = $(this).index();

$('#index_input').val(_this);

off.eq(_this).addClass('off').siblings().removeClass('off');

},

mouseover: function() {

var _this = $(this).index();

//console.log(_this);

var on_l = parseInt(head_li.width()) * _this;

//console.log(on_l);

$('.on').stop(true).animate({

'left': on_l + 'px',

'width': head_li_width + 'px'

})

},

mouseout: function() {

var _this = $(this).index();

var on_l = parseInt(head_li.width()) * _this;

var index_input = $('#index_input').val();

//console.log(index_input) 获取当前val 里的值

$('.on').animate({

'left': index_input * head_li_width + 'px',

})

},

})