標籤內嵌套的手風琴

Question

新的這個論壇，請溫柔！我一直在使用一組標籤中的JQuery Accordions。這些標籤工作正常，手風琴也是如此，但是，我真正想要的是能夠使用部分手風琴中的鏈接進入手風琴的另一部分。手風琴將作爲說明手冊使用，因此在某些章節中會有一點基本上要求用戶「看這部分」。

我在這裏檢查過某些答案，例如：jquery ui accordions within tabs和http://jsfiddle.net/9nKZp/1/show/#1|，並且已經在互聯網上搜索了搜索手風琴的錨點以及標籤中的嵌套手風琴，但是我還沒有遇到這個問題！不能相信沒有人做到這一點！

這裏是我到目前爲止的代碼：

<!-- tabs --> 
<link rel="stylesheet" href="/resources/css/tabs.css" type="text/css" media="screen" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="/resources/js/tabs.js"></script> 
<!-- ENDS tabs --> 
<!-- accordion --> 
<link rel="stylesheet" href="/resources/css/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<!-- ENDS accordion --> 

<script> 
    $(function() { 
     $(".accordion").accordion({ 
      collapsible: true, 
      heightStyle: "content", 
      active: false, 

     }); 
    }); 
</script> 

<!-- TABS START --> 
<div class="tabs_wrapper"> 
    <!-- 1st new tab design START --> 
    <div id="new_tabs"> 
     <ul> 
      <li class="active"><a href="#tab1" rel="tab1">Tab1</a></li> 
      <li><a href="#tab2" rel="tab2">Tab2</a></li> 
      <li><a href="#tab3" rel="tab3">Tab3</a></li> 

     </ul> 
    </div> 
    <div id="new_tabs_content"> 
     <div id="tab1" class="tab_content" style="display: block;"> 

      <p> 
       Data on first tab 
      </p> 


     </div> 
     <div id="tab2" class="tab_content"> 
      <h1>Tab2</h1> 

      <div class="accordion"> 

       <h3><a id="#1">1</a></h3> 
       <div> 
        Content of 1 
        <div class="accordion"> 
         <h3><a id="#1.1">1.1</a></h3> 
         <div> 
          Content of 1.1 
          <div class="accordion"> 
           <h3><a id="#1.1.1">1.1.1</a></h3> 
           <div> 
            Content of 1.1.1, please see <a href="#2.1.2">2.1.2</a> 
           </div> 
           <h3><a id="#1.1.2">1.1.2</a></h3> 
           <div> 
            Content of 1.1.2 
           </div> 
           <h3><a id="#1.1.3">1.1.3</a></h3> 
           <div> 
            Content of 1.1.3 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <h3><a id="#2">2</a></h3> 
       <div> 
        Content of 2 
        <div class="accordion"> 
         <h3><a id="#2.1.1">2.1.1</a></h3> 
         <div> 
          Content of 2.1.1 
         </div> 
         <h3><a id="#2.1.2">2.1.2</a></h3> 
         <div> 
          Content of 2.1.2 
         </div> 
         <h3><a id="#2.1.3">2.1.3</a></h3> 
         <div> 
          Content of 2.1.3 
         </div> 
        </div> 
       </div> 
      </div> 

     </div> 
     <div id="tab3" class="tab_content"> 
      <h1>Tab3</h1> 
      <p>another load of data</p> 
     </div> 

    </div> 
    <!-- 1st new tab design END --> 
</div> 
<!-- TABS END --> 

請告知，如果你需要，我使用任何進一步的代碼我知道如tabs.js等

請幫幫我！ ！這是可能嗎！？

許多感謝，並大大的擁抱，如果你能幫助！:-)

Answer 1

這裏是如何得到這個工作的想法。

在示例http://jsfiddle.net/9nKZp/1/show/#1|1中看起來像鏈接標籤的工作，但它只適用於當你在一個新的標籤中加載頁面，而不是鏈接。

你需要你自己的jsfiddle（你已經有一個v.1），你應該在其中放置一些示例內容WITH鏈接從一個標籤/問題到另一個標籤/問題（或者可能有鏈接到同一個標籤，但另一個問題）！您還應該將半工作示例中的代碼實現到您的代碼中。

然後邏輯如下（使用jQuery的例子）：

（1）創建的單擊事件爲每個鏈接放置在標籤內，類似的東西：

$('#all_tabs_container a').click(function(){ 
    checkInternalLinks(); 
}); 

在功能checkInternalLinks（）...：

（2）您應該檢查鏈接是否爲內部（＃...），並且它是否處於已知格式（如：#x | x或#x | x | x或兩者）

（3）當您驗證此鏈接時，您需要制定具體功能來切換標籤和accordeons。 （4）需要的功能已經存在（！），但是在頁面加載時，所以你需要花點時間在它上面並且意識到發生了什麼，所以你可以將相同的代碼複製到onclick事件函數中。

如果你喜歡這個想法，你可以開始！即使你不能完成它，我敢肯定別人會幫助:-)