Question

我有 2 页面。 page1.html包含一系列链接＆amp; page2.html有手风琴。

我的问题： 是否可以直接链接到手风琴中的某个部分？所以，如果我想访问凯尔特人，我如何创建 a）打开正确的手风琴选项卡 b）锚定到凯尔特人ID的链接

这是我目前page2.html的代码：http://jsfiddle.net/7k9s1pg7/

HTML：

<dl class="accordion">

<dt><a href="" class="container heading">Soccer</a></dt>
<dd id="soccer">
  <div id="manutd">

    <p>Man Utd</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>

  </div>  

  <div id="celtic">

    <p>Celtic</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>

  </div>
</dd>

<dt><a href="" class="container heading">Formula 1</a></dt>
<dd id="formula1">
  <div id="lewishamilton">

    <p>Lewis Hamilton</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>

  </div>  

  <div id="michaelschumacher">

    <p>Michael Schumacher</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>

  </div>
</dd>
</dl>

使用Javascript：

(function($) {
    var allPanels = $('.accordion > dd').hide();
    var allLinks = $('a.heading');
    $('.accordion > dt > a').click(function() {
        allPanels.slideUp();

        allLinks.removeClass('active');

        if ($(this).parent().next().is(":visible")) return false;
        $(this).parent().next().slideDown();

        $(this).addClass('active');

        return false;
    });

})(jQuery);

Answer 1

在page1链接中使用锚点page2.html#lewishamilton并添加到您的JS代码

var hash = location.hash;
if (hash) {
    var el = $(hash);
    el.parent().slideDown();
    el.parent().prev().find('a').addClass('active');
}

http://jsfiddle.net/7k9s1pg7/2/

Answer 2

我最近遇到了同样的问题。我通过在.htaccess中设置RewriteRule而不是使用前端代码来修复它。

我这样做是因为我的要求是拥有一个用户友好的URL以获得更好的用户体验。另一种选择是转到#（location.hash）。

请参阅this question and answer。

我的想法是点击一个看起来用户友好的网址。类似的东西：

http://www.example.com/somepage/something

其中somepage是带有手风琴的页面，something是手风琴部分内按钮的ID。

在somepage中，您需要编写代码，使用something从onload上的网址中读取window.location.pathname，然后以编程方式点击something按钮。

请注意，这可以解决您的手风琴问题，并通过呈现用户友好的网址提供良好的用户体验。

使用jQuery链接到Accordion中的部分

2 个答案: