定製jquery手風琴用戶界面

Question

您好我正在使用jquery ui手風琴。我一直在試圖弄清楚如何（除了通常的手風琴功能），如果我點擊一個外部鏈接，它將作爲一個錨標籤，並滑動div顯示內容？

<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.core.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.accordion.js"></script> 

<script type="text/javascript"> 
    $(function() { 
     $("#accordion").accordion({ 
      autoHeight: false, 
      navigation: true 
     }); 

    }); 
</script> 

<a href="#1">slide 1</a> 

<a href="#2">slide 2</a> 

<a href="#3">slide 3</a> 

<div id="accordion"> 
    <h3><a href="#" name="1">1</a></h3> 
    <div>text here</div> 

    <h3><a href="#" name="2">2</a></h3> 
    <div>text here</div> 

    <h3><a href="#" name="3">3</a></h3> 
    <div>text here</div>  
</div> 

Answer 1

<script type="text/javascript"> 
    $(function() { 
     $("#accordion").accordion({ 
      autoHeight: false, 
      navigation: true 
     }); 
     $('a.link').unbind('click').bind('click',function(){ 
      var rel = $(this).attr('rel'); 
      $('#'+rel).trigger('click'); 
     }); 
    }); 
</script> 

<a class="link" rel="a1" href="#1">slide 1</a> 

<a class="link" rel="a2" href="#2">slide 2</a> 

<a class="link" rel="a3" href="#3">slide 3</a> 

<div id="accordion"> 
    <h3 id="a1"><a href="#" name="1">1</a></h3> 
    <div>text here</div> 

    <h3 id="a2"><a href="#" name="2">2</a></h3> 
    <div>text here</div> 

    <h3 id="a3"><a href="#" name="3">3</a></h3> 
    <div>text here</div>  
</div> 

我沒有測試過這一點，但在理論上它應該工作:)