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

I’ve got two pages — let’s call them page A and page B.

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

Page A has 4 links going to page B.

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

On page B I’ve got an accordion-styled grid — see http://css-tricks.com/examples/InfoGrid/

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

I’m trying to get it so if I click on one of the links on page A it will open one of the tabs on page B.

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

Can anyone help me?! Cheers.

谁能帮我?!干杯。

1 个解决方案

#1

On page A, give each of the links a hash value that will match an ID of each accordion item on page B.

在页面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>

Then on page B, Give each accordion item that you would click an ID that matches the hash values above.

然后在页面B上,给每个手风琴项目,您将单击与上面的哈希值匹配的ID。

(If one of them currently has an ID of "starter", change it to the ID you intend to use.)

(如果其中一个当前的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>

Finally, in the infogrid.js file, replace this line:

最后,在infogrid.js文件中,替换此行:

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

with this:

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

It will get the hash value from the location bar, and use it to trigger the click event on the proper accordion item.

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

EDIT:

As noted by @Tomas Lycken, you do probably want some default. You can either use the #starter ID provided ( then use that in the appropriate link ), or choose your own.

正如@Tomas Lycken所说,你可能想要一些默认值。您可以使用提供的#starter ID(然后在相应的链接中使用它),也可以选择自己的ID。

If you wanted #sectionOne to be the default, you could do this:

如果您希望#sectionOne成为默认值,则可以执行以下操作:

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

This will use the hash value if there is one, or #sectionOne if not.

如果有哈希值,这将使用哈希值,否则使用#sectionOne。

If you want to safeguard against invalid hash values, you could do this:

如果要防止无效的哈希值,可以执行以下操作:

var $viewAtPageLoad = $( window.location.hash ).trigger("click");

if(!$viewAtPageLoad.length) {
    $('#sectionOne').trigger("click");
);

#1