將附屬品跟蹤標籤放在jquery ui標籤上

Question

我在jquery驅動的asp.net c＃web應用程序的頁面上使用jquery ui選項卡。這些標籤將內容很好地分離出來，爲用戶提供體驗，讓他們在多個頁面之間移動。

我有第三方子公司需要跟蹤用戶的行爲，因此想要在每個頁面（「標籤」）上放置像素標籤。

如果我直接將標籤添加到每個標籤，那麼它將不會正確地跟蹤，因爲所有將在頁面加載時被解僱。

我正在考慮在用戶通過選項卡時使用java腳本在飛行中加載圖像。這是最好的方法，如果是的話，我該如何實現這一目標？任何其他建議。的需要包括每片什麼當用戶移動通過他們的樣品是：

Tab 1: <img src="https://xxxxx.com/xxxx.html?p=xxxx&d=1" width="0" height="0" /> 
Tab 2: <img src="https://xxxxx.com/xxxx.html?p=xxxx&d=2" width="0" height="0" /> 
Tab 3: <img src="https://xxxxx.com/xxxx.html?p=xxxx&d=3" width="0" height="0" /> 
Tab 4: <img src="https://xxxxx.com/xxxx.html?p=xxxx&d=4" width="0" height="0" /> 

我想提出一些結構的地方，我可以很容易地添加更多標籤每個UI選項卡中加載的無縫連接。

Answer 1

您可以將圖像置於其各自的選項卡中，但保留其src屬性爲空。將鏈接指向HTML5「data」屬性中的圖片。

然後，當選擇了選項卡，加載圖像：

HTML：

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">First Tab</a></li> 
     <li><a href="#tabs-2">Second Tab</a></li> 
     <li><a href="#tabs-3">Third Tab</a></li> 
    </ul> 

    <div id="tabs-1"> 
     <img class="affiliate" src="" height="0" width="0" data-src="https://xxxxx.com/xxxx.html?p=xxxx&d=1" /> 
     <p>The tabs contents goes here.</p> 
    </div> 

    <div id="tabs-2"> 
     <img class="affiliate" src="" height="0" width="0" data-src="https://xxxxx.com/xxxx.html?p=xxxx&d=2" /> 
     <p>The tabs contents goes here.</p> 
    </div> 

    <div id="tabs-3"> 
     <img class="affiliate" src="" height="0" width="0" data-src="https://xxxxx.com/xxxx.html?p=xxxx&d=3" /> 
     <p>The tabs contents goes here.</p> 
    </div> 
</div> 

然後，當創建的選項卡，通過在選擇的事件處理程序加載這些圖像。

的Javascript：

$('#tabs').tabs({ 
    select: function(event, ui) 
    { 
     $(ui.panel).find('img.affiliate').each(function() 
     { 
      $(this).attr('src', $(this).data('src')); 
     }); 
    } 
});