jquery 工具 - 选项卡鼠标悬停 - 添加链接答案

【问题标题】：jquery tools - tabs mouseover - adding a linkjquery 工具 - 选项卡鼠标悬停 - 添加链接
【发布时间】：2011-01-11 17:49:39
【问题描述】：

我喜欢这个工具在将鼠标移动到像素上时显示文本：

http://flowplayer.org/tools/demos/tabs/mouseover.htm

现在我试图打开一个链接，当鼠标单击其中一个像素时。我试过这样：

original: <'img src="http://static.flowplayer.org/img/commerce/commercial.png" alt="Commercial version" />'

adding link: <'a title="Mylink" href="http://mylink.com" target="_blank"><'img src="http://static.flowplayer.org/img/commerce/free.png" alt="Free version" /></a>''

[插入 ' 仅显示源代码。]

有了这个链接，鼠标悬停不再起作用。有人知道在那里做什么吗？

提前感谢您的帮助！

【问题讨论】：

标签： jquery hyperlink tabs mouseover

【解决方案1】：

我没有使用过这个 jQuery 工具。但我认为该工具需要结构

<div id="products">
    <img src="http://static.flowplayer.org/img/commerce/free.png" alt="Free version" />
    <img src="http://static.flowplayer.org/img/commerce/commercial.png" alt="Commercial version" />
    <img src="http://static.flowplayer.org/img/commerce/multidomain.png" alt="Multidomain version" />
</div>

该工具会在 div 中查找 img（同样，我还没有看到代码，所以这是一个假设）。很多 jQuery 插件都需要一定的格式。

我会这样做：

 <div id="products">

        <img src="http://static.flowplayer.org/img/commerce/free.png" alt="Free version" id="image1" />
        <img src="http://static.flowplayer.org/img/commerce/commercial.png" alt="Commercial version" id="image2" />
        <img src="http://static.flowplayer.org/img/commerce/multidomain.png" alt="Multidomain version" id="image3" />
    </div>

为每个标签添加 id。我已经尝试过了，它似乎并没有破坏插件。（请原谅糟糕的命名约定:)）

然后使用javascript将图像的点击绑定到重定向：

$("#image1").click(function() {
    window.location = 'http://www.google.co.za';
});

$("#image2").click(function() {
    window.location = 'http://www.google.co.za/somwhereelse';
});

$("#image3").click(function() {
    window.location = 'http://www.google.co.za/helloworld';
});

希望有帮助

编辑

要回答您的问题以在页面加载时显示第二张图片的内容，我有以下解决方案。这对我来说有点像一种解决方法，但希望它有效。

在您的页面加载中，flowplayer 会使用内联样式隐藏除第一个图像之外的所有图像。

所以我们需要做的是从第一张图片中删除该样式，并将其添加到第二张图片中。请记住，这只能在页面加载时发生一次，因此您需要将其添加到 document.ready 函数中。

//make the display attribute of the style none. This will render it invisible
$("#free").css('display','none');
//make the display attribute of the style block (as what Flowplayer does)
$("#commercial").css('display','block');

重要的是，这只发生一次，然后 FlowPlayer 功能在鼠标悬停时正常启动。

【讨论】：

感谢您的帮助 - 它对我有用！您是否知道如何在打开演示页面而不是第一张图片的上下文时强制显示第二张图片的“上下文”？
再次感谢 - 您的第二个建议也很有效。不用担心，这是我的最后一个问题 ;-)

【解决方案2】：

我认为你需要忘记这个插件，因为它实际上并不是为了做你想做的事。此插件用于创建标签，您显示的实际上是另一件夹克中的标签。并且选项卡不会打开 url，它们会显示其窗格的内容。

您需要的是某种工具提示。以下是开始使用的工具提示列表：http://speckyboy.com/2009/09/16/25-useful-jquery-tooltip-plugins-and-tutorials/

【讨论】：

有人知道如何在打开演示页面时强制显示第二张图片的“上下文”而不是第一张图片的上下文吗？

【解决方案3】：

如果您将链接与图像放在一个跨度内，它将起作用。

<span><a href="http://yourlink"><IMG src="./jQuery Tools standalone demo_files/free.png" alt="Free version" class=""></a></span>

您必须将所有图像粘贴在一个跨度中，以便结构相同，即使您没有链接所有图像。

这样做的好处是它将被索引为真实链接，而 javascript 方法则不会。

【讨论】：

【解决方案4】：

最简单的解决方案：确保所有图像都包含在 <a> 中。即：

<div id="products"> 
    <a href="#"><img src="http://static.flowplayer.org/img/commerce/free.png" alt="Free version" /></a>
    <a href="#"><img src="http://static.flowplayer.org/img/commerce/commercial.png" alt="Commercial version" /></a>
    <a href="#"><img src="http://static.flowplayer.org/img/commerce/multidomain.png" alt="Multidomain version" /></a>
</div>

这很好用；我刚试过。我假设 jQuery 工具选项卡仅在您指定的容器的所有子项都是相同类型时才有效。

编辑：是的，它似乎只适用于它遇到的第一种类型的标签。例如如果您将前两个链接放在<a> 而不是第三个，则鼠标悬停仅适用于前两个。

【讨论】：