Firefox 如何呈现链接

Question

我只想分享我对 Ubuntu Jaunty Jackalope 上的 Firefox 3.5 如何呈现 HTML 的一些观察：

我的 JSP 页面中有以下条目：

<a title="myLink" href="[some url]">link 1</a>
<a title="myLink" href="[some url]">link 2</a>
<a title="myLink" href="[some url]">link 3</a>

<a title="myLink"  class="hiddenLink"  href="[some url]">link 4</a>
<a title="myLink"  class="hiddenLink"  href="[some url]">link 5</a>
<a title="myLink"  class="hiddenLink"  href="[some url]">link 6</a>

<button>more links</button>

上述链接在 Firefox 上显示为：

链接 4 到链接 6 被隐藏。

link 1 link2 link3

我使用 jQuery: 在“更多链接按钮”上附加了一个 javascript：

$("a[href ^='myLink']:hidden").show();

以在页面上显示链接 4 到 6。如果我单击“更多链接”按钮，这就是 Firefox 呈现链接的方式：

link 1 link2 link3
链接4
链接5
链接6

Answer 1

可能是因为当您调用 show() 时，jQuery 将显示样式属性设置为 display="block"，而不是 display="inline"。试试这个：

$("a[href ^='myLink']:hidden").css('display', 'inline');

或者：

$("a[href ^='myLink']:hidden").removeClass();

Answer 2

这是因为 .show() 将它们变成块：

此函数在隐藏时显示页面上的匹配元素。它实际上将显示样式更改为“块”。这可能会导致页面布局出现一些问题，因为它会在元素之前和之后插入换行符，但对于一般用途来说，它是完美的。为了更灵活的使用，请查看 .addClass() 和 .removeClass() 函数。

我建议将 .show() 替换为 .removeClass('hiddenLink')。

或者“hiddenLink”不仅仅隐藏链接，您是否希望它们在可见时看起来与其他链接不同？