多个列表直接在一个页面内的切换,简短的JS代码如下

function listTab(e) {
var $currentTarget = $(e.currentTarget);   //取到当前点击的元素
$(".customerManagePage").hide();            //设置全部隐藏
var $page = $("#" + $currentTarget.attr("tabid"));    //拼接字符串,利用tabid="id"来实现$("ID")的show() hide(),
var $imgTab = $currentTarget.parents("div").eq(0).find(".img_tab");  //取到当前点击元素的父级元素,
var index = $imgTab.index($currentTarget);          //index的方法取到当前元素的在父级元素下的序号
$page.show();                                           //显示大的页面
$page.find(".childPage").hide();                 //控制大的页面下的两个子页面的show() hide()
$page.find(".childPage").eq(index).show();

}
$(".img_tab").on("click", listTab);

你可能感兴趣的:(JavaScript,函数)