jquery - 如何使用 jQuery 在页面加载时打开 Accordion 样式的网格?

标签 jquery html

我有两个页面——我们称它们为页面 A 和页面 B。

页面 A 有 4 个链接指向页面 B。

在页面 B 上,我有一个 Accordion 风格的网格 — 参见 http://css-tricks.com/examples/InfoGrid/

我正在尝试获取它,因此如果我单击页面 A 上的一个链接,它将打开页面 B 上的一个选项卡。

谁能帮帮我?!干杯。

最佳答案

在页面 A 上,为每个链接提供一个哈希值,该哈希值将匹配页面 B 上每个 Accordion 项目的 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 上,为您要单击的每个 Accordion 项目提供一个与上面的哈希值匹配的 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");

它将从地址栏中获取哈希值,并使用它来触发适当 Accordion 项上的点击事件。


编辑:

@Tomas Lycken 所述,您可能需要一些默认值。您可以使用提供的 #starter ID(然后在适当的链接中使用它),也可以选择您自己的 ID。

如果你想让 #sectionOne 成为默认值,你可以这样做:

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

如果有,这将使用散列值,如果没有,则使用 #sectionOne

如果你想防止无效的散列值,你可以这样做:

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

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

关于jquery - 如何使用 jQuery 在页面加载时打开 Accordion 样式的网格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3289805/

相关文章:

javascript - 如何在插入 jQuery 后更新/刷新 DOM 项

html - 如何使导航栏中的文本行居中?

javascript - iOS 7 视口(viewport)元标记更改

css - 我可以响应式地在 HTML5 <details> 上设置 "open"属性吗?

jquery - X 秒后停止 jQuery ajax 刷新

jquery - 有什么方法可以用 CSS/jQuery 手动排列列表项(只对它们排序一次,而不是四处拖动)?

html - CSS Slider Revolution - 图层需要显示在图片中的特定位置

html - 使用按钮作为链接(GET 请求)

jquery - 如何自动平滑地动画div高度

javascript - 显示 child /查找