Javascript选项卡：致电事件onclick

Question

我得到了一些我需要更改的代码。它是由别人建立，并不是很整齐...

有一个javascript tabcontrol，包含4个选项卡，其中包含gridviews。 所有4个gridview都是在页面加载过程中生成的，但是我希望它们加载，当您激活选项卡时（因为可以看到一侧，而不需要特定的网格视图）

所以，我的问题是：如何从javascript选项卡调用事件（加载gridview）？

如何突片产生：（生成的代码，我知道，可怕的）

 
var obj = 0; 
var oid = 0; 
var otb = 0; 
var myTabs = new Array(); 
var myTabitems = new Array(); 
var myTabitem = new Array(); 
var myTabContent = new Array(); 
var myLists = new Array();
 

function showTabContent(tab) 
{ 
    tb = tab.obj; 
    id = tab.nr; 
    if (myTabs[tb].oid != -1) 
    { 
     myTabs[tb].myTabContent[myTabs[tb].oid].style.display = 'none'; 
     myTabs[tb].myTabitem[myTabs[tb].oid].className -= " active"; 
    } 
    myTabs[tb].myTabContent[id].style.display = 'block'; 
    myTabs[tb].myTabitem[id].className += " active"; 
    myTabs[tb].oid = id; 
}
 

function boTabs() 
{ 
    var myBlocks = new Array(); 
    myBlocks = document.getElementsByTagName("div"); 
    var stopit = myBlocks.length; 
    for (var g = 0; g < stopit; g++) 
    { 
     if (myBlocks[g].className == "tabs") 
     { 
      myTabs.push(myBlocks[g]); 
     } 
    } 
    var stopit2 = myTabs.length; 
    for (var i = 0; i < stopit2; i++) 
    { 
     myTabs[i].myLists = myTabs[i].getElementsByTagName("ul"); 
     if (myTabs[i].myLists[0].className == "tabs") 
     { 
      myTabs[i].myTabitems = myTabs[i].myLists[0].getElementsByTagName("li"); 
     } 
     var stopit3 = myTabs[i].myTabitems.length; 
     myTabs[i].obj = i; 
     myTabs[i].myTabitem = new Array(); 
     myTabs[i].myTabContent = new Array(); 
     for (var j = 0; j < stopit3; j++) 
     { 
      myTabs[i].myTabitem.push(myTabs[i].myTabitems[j]); 
      myTabs[i].myTabitem[j].nr = j; myTabs[i].myTabitem[j].obj = i; 
      myTabs[i].myTabitem[j].onclick = function() { showTabContent(this); }; 
     } 
     var myTabDivs = myTabs[i].getElementsByTagName("div"); 
     for (var j = 0; j < myTabDivs.length; j++) 
     { 
      if (myTabDivs[j].className == "tabcontent") 
      { 
       myTabs[i].myTabContent.push(myTabDivs[j]);
 

 } 
    } 
    myTabs[i].myTabitem[0].className += " active"; 
    myTabs[i].myTabContent[0].style.display = 'block'; 
    myTabs[i].oid = 0; 
    myTabDivs = null; 
} 
myBlocks = null; 

} 的onload = boTabs;

Answer 1

我将完全改变其使用JQuery Tabs和JQuery AJAX加载电网

Answer 2

如果你想要一个JS的解决方案，你必须建立自己使用JS代码GridView的表...如果你希望服务器做这项工作，你需要一个UpdatePanel，并使用客户端_doPostBack方法。如果你喜欢这种方法，Ajax Control Toolkit选项卡容器可以配置为在选项卡发生变化时回发给服务器，你可以用更新面板来包装这个控件，而且看起来好像所有事情都是用JS代码完成的。另外，你也可以使用绑定GridView并返回HTML的Web服务......还没有尝试过，但看到它完成。

HTH，如果你让我知道你喜欢什么选项，我可以相应地更新。

Answer 3

我现在得到了jQuery和CSS制作的tabcontrol。 此时所有4个gridviews都绑定在Page_Load上，但是，由于花费时间在gridview后面运行te sproc，所以需要几秒钟的时间。因此，我想加载它们tabclick ......在UpdatePanel似乎是最好的办法......

JQuery的：

$(document).ready(function() 
{ 

    //When page loads... 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
    $(".tab_content:first").show(); //Show first tab content 

    //On Click Event 
    $("ul.tabs li").click(function() 
    { 

     $("ul.tabs li").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 
     $(".tab_content").hide(); //Hide all tab content 

     var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active ID content 
     return false; 
    }); 
});