标签中的嵌套手风琴

Question

新来这个论坛，所以请温柔！ 我在使用一组选项卡中的 jQuery Accordions 时遇到了问题。 选项卡工作正常，手风琴也是如此，但是...我真正想要的是能够使用手风琴部分内的链接转到手风琴的另一部分。 手风琴将用作说明手册，因此在某些部分中会有一些内容基本上告诉用户“请参阅此部分”。

我在这里查看了某些答案，例如： 标签中的 jquery ui 手风琴和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），您应该在其中放置一些示例内容，其中包含从一个选项卡/问题到另一对选项卡/问题的链接（或者可能有指向同一个选项卡的链接，但另一个问题） ！ 您还应该将半工作示例中的代码实现到您的代码中。

那么逻辑如下（使用jQuery的例子）：

(1) 为您放置在选项卡内的每个链接创建点击事件，如下所示：

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

在函数 checkInternalLinks()... 中：

(2) 您应该检查链接是否是内部链接 (#...) 以及它是否采用已知格式（例如：#x|x 或 #x|x|x 或两者）

(3) 当您验证此链接时，您需要使用特定功能来切换选项卡和手风琴。

(4) 所需的功能已经存在（！），但是在页面加载时，因此您需要花一些时间来了解正在发生的事情，因此您可以将相同的代码复制到 onclick 事件函数中。

如果你喜欢这个主意，你就可以开始了！ 即使你不能完成它，我相信其他人会帮助:-)