gpt4 book ai didi

javascript - 选项卡中的嵌套 Accordion

转载 作者:行者123 更新时间:2023-11-28 01:48:40 26 4
gpt4 key购买 nike

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

我在这里查看了某些答案,例如:jquery ui accordions within tabshttp://jsfiddle.net/9nKZp/1/show/#1|并在整个互联网上搜索了带有 anchor 的 Accordion 以及选项卡中的嵌套 Accordion ,但我还没有遇到这个正在完成!真不敢相信没有人这样做过!

这是我目前的代码:

<!-- 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 等,请告诉我。

请帮帮我!这可能吗?!

如果您能提供帮助,非常感谢和大大的拥抱!!:-)

最佳答案

这里是如何让这个工作的想法。

在例子中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) 当您验证此链接时,您需要创建特定功能来切换选项卡和 Accordion 。

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

如果你喜欢这个想法,你可以开始!即使您无法完成,我相信其他人也会提供帮助:-)

关于javascript - 选项卡中的嵌套 Accordion ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21262708/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com