tab层切换的问题

function tabSelect(showId,idpre) {
for(i=1; i<=10; i++) {
var tab = $("#" + idpre + i);
if(!tab[0]) break;
if (i == showId) { 
$("#btn_"+idpre+i).attr("className","selected");
$("#"+idpre+i).toggleClass("none");
var isload = $("#"+idpre+i).attr('isload');
var dn = $("#"+idpre+i).attr('datacallname');
var pm = $("#"+idpre+i).attr('params');
if(!isload && dn) {
ajax_datacall(idpre+i, dn, pm);
}
$("#"+idpre+i).show()
 } else {
$("#btn_"+idpre+i).attr("className","unselected");
$("#"+idpre+i).hide();
}
}
}
JS 代码如上
1——2 没有错误，可以自由切换。2——3切换就出现了问题。
位置2   
 id="btn_subject2"     onclick="tabSelect(2,'subject')"
 id="btn_subject2"     onclick="tabSelect(3,'subject')"
 id="btn_subject2"     onclick="tabSelect(4,'subject')" ……
位置3 为SQL调用 
<ul class="listWithPic" id="subject2" "数据调用代码"></ul> 
<ul class="listWithPic" id="subject3" "数据调用代码"></ul> 
<ul class="listWithPic" id="subject4" "数据调用代码"></ul> ……
这样调用，没有问题，不过因为一些循环代码，subject* 不能按照2、3、4、5，现在位置2的代码为：
 id="btn_subject2"     onclick="tabSelect(2,'subject')"
 id="btn_subject10"     onclick="tabSelect(10,'subject')"
 id="btn_subject14"     onclick="tabSelect(14,'subject')" ……
位置3
<ul class="listWithPic" id="subject2" "数据调用代码"></ul> 
<ul class="listWithPic" id="subject10" "数据调用代码"></ul> 
<ul class="listWithPic" id="subject14" "数据调用代码"></ul> ……
这样就出错了。
请问是不是JS代码的问题？如果是，该如何更改？