Javascript 选项卡中嵌套的手风琴

Javascript 选项卡中嵌套的手风琴,javascript,jquery,html,jquery-ui,Javascript,Jquery,Html,Jquery Ui,新到这个论坛,所以请温柔!我一直对jQuery手风琴有问题,它位于一组选项卡中。标签很好用,手风琴也很好用,但是。。。我真正想要的是能够使用手风琴内部的链接,转到手风琴的另一部分。手风琴将被用作指导手册,因此在某些章节中,会有一点基本上是对用户说“看看这个章节” 我在这里查看了一些答案,例如:和,在互联网上搜索带有锚的手风琴以及标签中嵌套的手风琴,但我还没有看到这样做!!真不敢相信没有人这么做 以下是我目前掌握的代码: <!-- tabs --> <link rel="

新到这个论坛,所以请温柔!我一直对jQuery手风琴有问题,它位于一组选项卡中。标签很好用,手风琴也很好用,但是。。。我真正想要的是能够使用手风琴内部的链接,转到手风琴的另一部分。手风琴将被用作指导手册,因此在某些章节中,会有一点基本上是对用户说“看看这个章节”

我在这里查看了一些答案,例如:和,在互联网上搜索带有锚的手风琴以及标签中嵌套的手风琴,但我还没有看到这样做!!真不敢相信没有人这么做

以下是我目前掌握的代码:

<!-- 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 -->

$(函数(){
$(“手风琴”)。手风琴({
可折叠的:是的,
高度样式:“内容”,
活动:错误,
});
});
第一个选项卡上的数据

表2 1.1.2 第1.1.2条的内容 1.1.3 第1.1.3条的内容 2. 第2部分的内容 2.1.1 第2.1.1条的内容 2.1.2 第2.1.2条的内容 2.1.3 第2.1.3条的内容 表3 另一批数据

如果您需要我正在使用的任何其他代码,如tabs.js等,请告诉我

请帮帮我!这有可能吗


非常感谢,如果你能帮忙,请拥抱!!:-)

以下是如何让这台机器工作的想法

在本例中,选项卡链接似乎起作用,但它仅在您在新选项卡中加载页面时起作用,而不是从链接加载页面时起作用

您需要自己的JSFIDLE(您已经有了一个v.1),在这里您应该放置一些示例内容,其中包含从一个选项卡/问题到另一个成对选项卡/问题的链接(或者可能有指向同一选项卡的链接,但有另一个问题)!您还应该将半工作示例中的代码实现到您的代码中

然后,逻辑如下(使用jQuery的示例):

(1) 为放置在选项卡内的每个链接创建单击事件,类似于:

$('#all_tabs_container a').click( function(){
    checkInternalLinks();
});
在函数checkInternalLinks()中

(2) 您应该检查链接是否为内部(#…)以及是否为已知格式(如:#x | x或#x | x或两者兼而有之)

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

(4) 所需的功能已经存在(!),但是在页面加载时,因此您需要花一些时间来实现它,以便可以将相同的代码复制到onclick事件函数


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

第二个链接似乎对我有用。你还需要什么?(可能你正在尝试使用不同的标签插件-/resources/js/tabs.js?)根据我在上面第一段中的查询:我真正想要的是能够使用手风琴内部的链接转到手风琴的另一部分。手风琴将被用作指导手册,因此在某些章节中,会有一点基本上是对用户说“看看这个章节”。在我粘贴在第1.1.1节的代码中,有一个“请参阅”链接,需要将用户发送到手风琴的第2.1.1节。选项卡和手风琴工作正常,但我无法使手风琴内的链接转到不同的部分。好的,检查这里的示例:(打开第二个选项卡,第二个问题,但似乎对第一季度不起作用)和(打开第三个选项卡和第二个问题)。如果这是需要的,那么您可能希望提供一个代码的JSFIDLE示例,我们将进一步进行实验,直到涵盖Q1问题和其他需求(如果有其他需求)。:-)谢谢部长,但我想我没有说清楚。我需要在同一页内的链接,而不是地址栏中的外部链接,以导航到手风琴中的某个部分。我不是想从一个外部链接中使用地址栏,而是一个指向另一个手风琴部分的内部链接。现在它更清晰了(最好更新你的问题)!看起来你需要一个特定的JS功能,所以如果你把你的代码放在一个演示网站上,那么更多的人会尝试,你会有更好的机会找到一个有效的解决方案哇!!!!终于解决了。。。在我另一半天才的帮助下!!!看看这个提琴:如果你在你的url中使用散列标签,比如www.website.com#instructions(说明)2(说明)3),这也能起作用。这将带你进入说明选项卡和手风琴项目2.3!我的生命是完整的!我刚刚检查了3分钟,似乎唯一缺少的功能是地址栏中的哈希设置。在第一个示例中,有多个嵌套选项卡,所有选项卡都可链接(每个级别),现在在您的示例中,内部链接可以工作,但地址栏仅显示到第一个级别的链接!所以如果你想发送