function main()
{
for (var i = 0; i < obj.length; i++)
{
createTabs(i, obj);
createPanel(i, obj);
}
}
我已经从下面的代码中创建了选项卡和面板,并以这样的方式附加了tab1单击时panel1将显示而tab2 for tab2
function createTabs(i,obj)
{
var tab = document.createElement("LI");
tab.id = "tab_"+i;
tab.className = "tabs";
tab.name="header_tabs";
if(i==2)
{
tab.style.background="#1EAEDB";
}
var tabLink = document.createElement("A");
tabLink.className = "text";
tabLink.id = "tabHeader_"+i;
if(i==2)
{
tabLink.style.color="white";
}
var tabHeading=document.createTextNode(obj[i].name);
tabLink.appendChild(tabHeading);
tab.appendChild(tabLink);
document.getElementById("tabs").appendChild(tab);
}
function createPanel(i,obj)
{
var panel = document.createElement("div");
panel.id = "panel_"+i;
if(i==2){ //FIXME
panel.style.display = "block";
panel.className = "panel active";
}else{
panel.style.display = "none";
panel.className = "panel";
}
var panelText=document.createTextNode(obj[i].name);
panel.appendChild(panelText);
document.getElementById("main").appendChild(panel);
}
function clickTabEvent()
{
var tabs = document.getElementsByTagName("LI");
for (var i = 0, len = tabs.length; i < len; i++) {
var item = tabs[i];
if (item.id && (item.id.indexOf("tab_")!=-1)){
(function (item) {
item.addEventListener('click', function(){
showTabPanel(item);
showActiveTab(item);
});
})(item);
}
}
}
function showTabPanel(item)
{
var panel_div=document.getElementsByTagName("DIV");
for (var i = 0, len = panel_div.length; i < len; i++) {
var panel_item = panel_div[i];
if(panel_item.id && (panel_item.id.indexOf("panel_")!=-1)){
if(item.id.substr(4,5)==panel_item.id.substr(6,7)){
panel_item.style.display="block";
}
else
{
panel_item.style.display="none";
}
}
}
}
因此,对于上面的代码,如何在单击tab1时在jquery中发出Ajax请求,它应该检索panel1的数据,当单击tab2时,它应该检索panel2的数据