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在'more links按钮'上附加了一个javascript：

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

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

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

Answer 1

可能是因为当你调用show()时，jQuery将display style属性设置为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”不只是隐藏链接，你希望它们在可见时与其他链接看起来不同吗？

Firefox如何呈现链接

2 个答案: