Question

我有两个带标签的div，我需要编写一个javascript或jquery脚本，允许在适当的标签名称上来回切换内容。

我创造了一个小提琴HERE。虽然我还没有开始写javascript。有人可以帮我看一下吗？看起来它应该非常直接：

（ID已更新）

准备好div1，
隐藏div1，显示div2 onclick link1，
隐藏div2，显示div1 onclick link2

我首先尝试使用

$('#showTree').click(function() {
    $('#div1').hide();
    $('#div2').show();
}),
    $('#showTree2').click(function() {
    $('#div1').show();
    $('#div2').hide();
});

但这不起作用。有人会介意看小提琴并给我一些建议吗？非常感谢提前！

Answer 1

您应该使用某个类来了解哪个选项卡当前处于活动状态。尝试.toggle（）显示/隐藏这里的工作范例 example

$('span.a, span.b').click(function() {
if(!$(this).hasClass('active')) {
    $('span.a, span.b').removeClass('active');
    $(this).addClass('active');
    $('div.a, div.b').toggle();
}

}）;

Answer 2

您的主要问题是您的标记无效。因此#div2已成为#div1的孩子。在隐藏#div1时，#div2也会被隐藏。

<div id="div1">
    <div class="sidebar">
    </div>
<div id="div2">
    <div class="sidebar">
    </div>

您需要匹配结束标记。

<div id="div1">
    <div class="sidebar">
    </div>
</div>
<div id="div2">
    <div class="sidebar">
    </div>
</div>

此外，您需要修复重复的id。特别#showTree和#showTree2。快速解决方法是使用类名。也就是说，

<nav class="sidebartabs">
  <a href="#" class="showTree">Questions by Folder</a>
  <a href="#" class="showTree2">Questions by Category</a>
</nav>

在页面加载时隐藏#div2可以使用CSS完成。

.hidden {
  display: none;
}

<div id="div2" class="hidden">...</div>

See a live example here.

使用jquery或javascript在具有不同dynatrees的两个选项卡之间切换

2 个答案: