标签内嵌套的手风琴

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事件函数中。

如果你喜欢这个想法，你可以开始！即使你不能完成它，我敢肯定别人会帮助:-)