jq实现切换栏目显示效果

//获span标签,并绑定点击事件
// $('p span').each(function(){
//      $(this).click(function(){
// alert('a');
$('p span').click(function(){

//获取当前点击的span
var i = $(this).index();
//隐藏所有的span,然后展示当前被点击的span
$('#tabbody-div table.tab').hide();
//显示当前被点击的span
$('#tabbody-div table.tab').eq(i).show();
//把原来的选中的变成非选中转态
$('.tab-front').removeClass('tab-fron').addClass('tab-back');
//设置当前的按钮为选中状态
$(this).removeClass('tab-back').addClass('tab-front');
});