使用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來提供良好的用戶體驗。