Question

我正在开发一个项目，我需要在其中使用tabbox控件和flybox。为此，我提到了这个链接。 http://www.my-html-codes.com/javascript-tabs-html-5-css3

并且我做了一些修改。我正在使用jquery从其他名为product_detail.aspx的页面中获取详细信息，如下所示

$('.inline2').click(function()
                {
                 $('#inline_content').show();
                 var myid=( $(this)[0].attributes["data-id"].value);
                     $('#inline_content').html('<img src="images/ajax-loader.gif" style="margin-left: 50%;padding: 10px;"/>')
                     $.get( "product_detail.aspx?product_id="+myid+"", function( data )      {
                        var resourceContent = data; 
                         data=$(resourceContent).find('table#minicart1');
                         $('#cboxLoadedContent div').html();
                         $('#cboxLoadedContent div').html(data);
                         var aa= callmeonetime();
                         return false;
                                // can be a global variable too...
                        // process the content...

                    });

和tabs.js功能

function callmeonetime()
{
window.onload=function() {

  // get tab container
  var container = document.getElementById("tabContainer");
    // set current tab
    var navitem = container.querySelector(".tabs ul li");
    //store which tab we are on
    var ident = navitem.id.split("_")[1];
    navitem.parentNode.setAttribute("data-current",ident);
    //set current tab with class of activetabheader
    navitem.setAttribute("class","tabActiveHeader");

    //hide two tab contents we don't need
    var pages = container.querySelectorAll(".tabpage");
    for (var i = 1; i < pages.length; i++) {
      pages[i].style.display="none";
    }

    //this adds click event to tabs
    var tabs = container.querySelectorAll(".tabs ul li");
    for (var i = 0; i < tabs.length; i++) {
      tabs[i].onclick=displayPage;
    }
}

// on click of one of tabs
function displayPage() {
  var current = this.parentNode.getAttribute("data-current");
  //remove class of activetabheader and hide old contents
  document.getElementById("tabHeader_" + current).removeAttribute("class");
  document.getElementById("tabpage_" + current).style.display="none";

  var ident = this.id.split("_")[1];
  //add class of activetabheader to new active tab and show contents
  this.setAttribute("class","tabActiveHeader");
  document.getElementById("tabpage_" + ident).style.display="block";
  this.parentNode.setAttribute("data-current",ident);
}

window.onload=function() {

  // get tab container
    var container = document.getElementById("tabContainer");
        var tabcon = document.getElementById("tabscontent");
        //alert(tabcon.childNodes.item(1));
    // set current tab
    var navitem = document.getElementById("tabHeader_1");

    //store which tab we are on
    var ident = navitem.id.split("_")[1];
        //alert(ident);
    navitem.parentNode.setAttribute("data-current",ident);
    //set current tab with class of activetabheader
    navitem.setAttribute("class","tabActiveHeader");

    //hide two tab contents we don't need
     var pages = tabcon.getElementsByTagName("div");
        for (var i = 1; i < pages.length; i++) {
         pages.item(i).style.display="none";
        };

    //this adds click event to tabs
    var tabs = container.getElementsByTagName("li");
    for (var i = 0; i < tabs.length; i++) {
      tabs[i].onclick=displayPage;
    }
}

// on click of one of tabs
function displayPage() {
  var current = this.parentNode.getAttribute("data-current");
  //remove class of activetabheader and hide old contents
  document.getElementById("tabHeader_" + current).removeAttribute("class");
  document.getElementById("tabpage_" + current).style.display="none";

  var ident = this.id.split("_")[1];
  //add class of activetabheader to new active tab and show contents
  this.setAttribute("class","tabActiveHeader");
  document.getElementById("tabpage_" + ident).style.display="block";
  this.parentNode.setAttribute("data-current",ident);
}
}

现在当我使用调试器检查函数时，我得到的是当调用$.get( "product_detail.aspx?product_id="+myid+"", function( data )时它从该页面获取数据但同时调用callmeonetime()事件。但是它跳过了windows.onload = function（）。

因此无法在我的页面中找到标签。

那么我应该做些什么改变才能正常工作？

Answer 1

$('.inline2').click(function()
                {
                 $('#inline_content').show();
                 var myid=( $(this)[0].attributes["data-id"].value);
                     $('#inline_content').html('<img src="images/ajax-loader.gif" style="margin-left: 50%;padding: 10px;"/>')
                     $.get( "product_detail.aspx?product_id="+myid+"", function( data )      {
                        var resourceContent = data; 
                         data=$(resourceContent).find('table#minicart1');
                         $('#cboxLoadedContent div').html();
                         $('#cboxLoadedContent div').html(data);

// CHANGED CODE...
                         var container = document.getElementById("tabContainer");
    // set current tab
    var navitem = container.querySelector(".tabs ul li");
    //store which tab we are on
    var ident = navitem.id.split("_")[1];
    navitem.parentNode.setAttribute("data-current",ident);
    //set current tab with class of activetabheader
    navitem.setAttribute("class","tabActiveHeader");

    //hide two tab contents we don't need
    var pages = container.querySelectorAll(".tabpage");
    for (var i = 1; i < pages.length; i++) {
      pages[i].style.display="none";
    }

    //this adds click event to tabs
    var tabs = container.querySelectorAll(".tabs ul li");
    for (var i = 0; i < tabs.length; i++) {
      tabs[i].onclick=displayPage;
    }
                    });

不调用windows.onload事件

1 个答案: