使用jQuery链接到手风琴中的部分

Question

我有2页。 page1.html包含一系列链接， page2.html具有手风琴。

我的问题：是否可以直接链接到手风琴中的某个部分？ 因此，如果我想访问'Celtic'，我该如何创建一个链接，以便a）打开正确的“手风琴”选项卡b）锚定到celtic 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

在第1 page1链接中使用定位page2.html#lewishamilton ： 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，以获得更好的UX。 另一个选择是使用# （ location.hash ）。

请参阅此问题和答案 。

我的想法是点击一个看起来用户友好的URL。 就像是：

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

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

在somepage ，你需要编写代码来读something从网址上onload使用window.location.pathname然后编程点击something按钮。

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