2013-12-12 72 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; 
    } 
        });