Question

我在jquery驱动的asp.net c＃web应用程序中的页面上使用jquery ui选项卡。选项卡可以很好地分离内容，为用户提供他们在多个页面中移动的体验。

我有第三方联盟公司需要跟踪用户的操作，因此希望在每个页面上放置像素标签（＆＃34;标签＆＃34;）。

如果我将标签直接添加到每个标签，那么它将无法正确跟踪，因为所有标签都会在页面加载时被触发。

当我在用户浏览选项卡时，我正在考虑使用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>

然后，在创建选项卡时，传入一个select事件处理程序来加载这些图像。

<强>的Javascript ：

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

在jquery ui标签上放置联盟会员跟踪标签

1 个答案: