在 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“数据”属性中。

然后，选择选项卡时，加载图像：

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