2011-11-10 35 views
2

我有一個幾乎相同的問題在這裏問(Link to open jQuery Accordion?),但無法正確實現答案。Jquery手風琴激活特定的面板與錨點標記/網址hash

我試過這個解決方案,但它並沒有爲我工作:

$("#accordion").accordion("activate", <?php echo $_GET['id']; ?>); 

我有一個jQuery手風琴用下面的代碼:

<script type="text/javascript"> 
     $(function(){ 

      // Accordion 
      $("#accordion").accordion({ 
       header: "h3", 
       autoHeight: false, 
       navigation: true, 
       collapsible: true, 
       active: false 
      }); 
      $(".exlnk").click(function(event){ 
     window.location.hash=this.hash; 
});  

     }); 


</script> 
<script type="text/javascript"> 
function Click1(){ 
$("#accordion").accordion('activate' , 0) 
} 
function Click2(){ 
$("#accordion").accordion('activate' , 1) 
} 

</script> 

簡體HTML:

<h3><a class="exlnk" href="#about" title="About">About</a></h3> 
<div>content blah blah</div> 
<h3><a class="exlnk" href="#about" title="About">About</a></h3> 
<div>Blah blah</div> 

上面的代碼允許我在主頁上有激活指定面板的鏈接。

exlnk位爲每個面板提供了一個哈希值,通過點擊它,我在本教程(http://www.michaeljacobdavis.com/tutorials/statesavingaccordion.html)上閱讀的內容將創建狀態保存的可書寫面板。它分配散列,但它不激活面板或在重新加載時保存它們。

我想要的是能夠外部鏈接到http://www.mysite.com/page#anchor,並打開相應的面板打開頁面。我可以從手風琴頁面鏈接的解決方法非常有用!

非常感謝您的幫助......我已閱讀本網站上與手風琴腳本相關的每個Q & A,並且無法做出任何答案。我對Jquery/Javascript非常陌生,所以解釋所有實現步驟以及將每個建議代碼放置在何處的答案將非常棒。

+0

查看由$(「#accordion」)生成的JS片段將是有用的。accordion(「activate」,<?php echo $ _GET ['id'];?>);' –

+0

也許這就是我錯過的 - 在我嘗試使用該片段時,它只是坐在我的手風琴代碼中,沒有被引用或以任何其他方式調用。 – essentialred

+0

嘿,我剛剛爲你做了一個快速的手風琴: [鏈接] – sally

回答

1

你想在你的服務器端代碼,以配合與.activate()方法,它應該讓你動態顯示基於什麼爲索引或選擇通過面板:

激活的部分內容Accordion以編程方式。索引 可以是零索引編號,以將頭部的位置匹配到關閉或匹配元素的選擇器。通過false關閉所有(只有 可能與collapsible:true)。

實施例:

如果可能,而不是傳遞$_GET['id'],傳遞,您希望啓動的元件匹配選擇器的名稱。例如:

$("#accordion").accordion("activate", "#<?php echo $_GET['tab']; ?>"); 

$_GET['tab']將是您傳遞的選擇器的名稱。當然,如果選擇器需要成爲一個類,只需將散列更改爲一個句點。

如果您希望根據像http://www.mysite.com/page#anchor這樣的鏈接激活一些東西,那麼您需要在頁面加載並使用該散列時使用JavaScript獲取散列(這將是激活面板的選擇器的名稱)代替$_GET['id']

+0

非常感謝您的回答!聽起來像我正在尋找的東西,但我不知道如何實現它 - 你有一個例子,說明我的代碼的改變是什麼樣子的? – essentialred

+0

不客氣。我已經編輯了我的答案,以提供示例:) – Aaron

+0

Hm ...代碼$(「#accordion」)。accordion(「activate」,「#」);它不一定是面板的ID才能使用它?例如,要激活第一個面板,代碼是$(「#accordion」)。accordion(「activate」,「0」); – essentialred