Question

我有两页 - 让我们称他们为A页和B页。

页面A有4个链接转到第B页。

在第B页，我有一个手风琴风格的网格 - 请参阅http://css-tricks.com/examples/InfoGrid/

我正试着这样做，如果我点击第A页上的其中一个链接，它将打开第B页上的其中一个标签。

任何人都可以帮助我吗？！欢呼声。

Answer 1

在第A页上，为每个链接指定一个哈希值，该值与第B页上每个手风琴项目的ID相匹配。

<a href='pageB.html#sectionOne'> Section One </a>
<a href='pageB.html#sectionTwo'> Section Two </a>
<a href='pageB.html#sectionThree'> Section Three </a>

然后在第B页上，给每个手风琴项目，你会点击一个与上面的哈希值相匹配的ID。

（如果其中一个当前的ID为“starter”，请将其更改为您要使用的ID。）

<dt id="sectionOne" style="cursor: pointer; font-size: 14px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; ">
   Section One
</dt>
...
<dt id="sectionTwo" style="cursor: pointer; font-size: 14px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; ">
   Section Two
</dt>
...
<dt id="sectionThree" style="cursor: pointer; font-size: 14px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; ">
   Section Three
</dt>

最后，在infogrid.js文件中，替换以下行：

$("#starter").trigger("click");

用这个：

$(window.location.hash).trigger("click");

它将从位置栏获取哈希值，并使用它来触发正确的手风琴项目上的点击事件。

修改

如 @Tomas Lycken 所述，您可能需要一些默认值。您可以使用提供的#starter ID（然后在相应的链接中使用该ID），也可以选择自己的ID。

如果您希望#sectionOne成为默认值，则可以执行此操作：

$( (window.location.hash || '#sectionOne') ).trigger("click");

如果有哈希值，则使用哈希值;如果不是，则使用#sectionOne。

如果要防止无效的哈希值，可以这样做：

var $viewAtPageLoad = $( window.location.hash ).trigger("click"); if(!$viewAtPageLoad.length) { $('#sectionOne').trigger("click"); );

如何使用jQuery在页面加载时打开手风琴风格的网格？

1 个答案: