2013-12-12 40 views
0

我正在一个项目中,我需要使用飞行箱使用tabbing控件。为此我引用了这个链接。 http://www.my-html-codes.com/javascript-tabs-html-5-css3windows.onload事件不叫

并且我做了一些修改。 我盖特使用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); 
} 
} 

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

因此无法在我的页面中获取标签。

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

+0

Window.onload事件是针对“product_detail.aspx”页面的? – Savaratkar

+0

nop其获取标签在我的飞行窗口工作.. –

+0

@ theinsaneone-在这里,当我尝试调试其内部callmeonetime功能,但它不会在任何'window.onload = function()'里面,所以我没有得到适当的当加载窗口时,它将在Window.onload内部进入选项卡 –

回答

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; 
    } 
        });