從另一頁鏈接到手風琴的一部分

我正在使用twitter-Bootstrap 2.04，並且使用最新的jQuery。我正在嘗試製作一個鏈接，它將從一個頁面轉到包含此手風琴的頁面，然後激活相應的手風琴部分。這是手風琴：從另一頁鏈接到手風琴的一部分

<div class="accordion-group"> 
      <div class="accordion-heading"> 
      <a name="Alink1" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
      <strong>Title</strong> 
      </a> 
      </div> 
      <div id="collapseOne" class="accordion-body in collapse" style="height: auto; "> 
      <div class="accordion-inner"> 
      some random content 
      <div> 
      </div> 
</div> 
<div class="accordion-group"> 
      <div class="accordion-heading"> 
      <a name="Alink2" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
      <strong>Title 2</strong> 
      </a> 
      </div> 
      <div id="collapseTwo" class="accordion-body collapse" style="height: 0px; "> 
      <div class="accordion-inner"> 
      some random content 2 
      <div> 
      </div> 
</div>

這是鏈接：

<a href="page.html/#Alink2">Link to some interesting stuff</a>

與鏈接到剛剛在頁面有點正常工作通常情況下，我需要使用Javascript來激活它？

來源

2012-08-17 Maverick Jones

這並沒有爲我工作在Twitter的引導網站與他們的榜樣，所以我假定這不是默認功能。 – Jeemusu 2012-08-17 15:18:27

您需要將正確的jScript附加到文件，它工作正常。 – 2012-08-17 16:05:45

是的，你需要手動激活頁面加載。像下面這樣的東西應該工作：

$(document).ready(function() { 
    location.hash && $(location.hash + '.collapse').collapse('show'); 
});

此外，作爲@SaadImran指出，這是假定您鏈接到收縮元件ID而不是名稱的錨（例如，#Alink2（例如，#collapseTwo）。）。

來源

2012-08-17 15:48:42 merv

+1，你應該指出，OP將需要使用鏈接'page.html＃collapseOne'而不是'page.html＃Alink1' – 2012-08-17 15:53:34

你有沒有嘗試過這樣的：

<a href="page.html#Alink2">Link to some interesting stuff</a>

來源

2012-08-17 15:14:06 aliirz

鏈接到頁面，但不鏈接到手風琴部分。 – 2012-08-20 10:12:31

感謝您的幫助。
我添加的功能，這樣的代碼可以打開WITHIN手風琴手風琴：

$(document).ready(function() { 
    if (location.hash){ 
    $(location.hash).collapse('show'); 
    $(location.hash).parents('.accordion-body').collapse('show'); 
    } 
});

來源

2013-03-05 18:57:24 mikeyarce

非常有用！謝謝。 – 2013-03-20 12:22:45

你可以用手風琴節的位置。以下鏈接在twitter bootstrap（wordpress）手風琴上打開第三個手風琴部分。

鏈接舉例：http://www.zfp-bauwesen.de/leistungen/ubersicht#3

Javscript代碼：

$(document).ready(function() { 

if (window.location.hash) { 
    var AccordionSectionNumber = window.location.hash.substring(1); 
    AccordionBodyID = $(".accordion .accordion-group:nth-of-type(" + AccordionSectionNumber + ") .accordion-heading a").attr('href') 
     if (! (typeof AccordionBodyID === "undefined")) { 
     $(AccordionBodyID).collapse('show'); 
     return true; 
     } 
    } 

});

來源

2013-10-09 13:29:52

從另一頁鏈接到手風琴的一部分

回答

相關問題