0

我有两个带选项卡的 div，我需要编写一个 javascript 或 jquery 脚本，以便在单击相应选项卡名称时来回切换内容。

我在这里创建了一个小提琴。虽然我还没有开始编写 javascript。有人可以帮我看看吗？看起来应该很简单：

（身份证更新了）

  • 准备就绪时显示 div1，

  • 隐藏 div1，显示 div2 onclick link1，

  • 隐藏 div2，显示 div1 onclick link2

我第一次尝试使用

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

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

4

2 回答 2

0

您应该使用某个类来了解当前处于活动状态的选项卡。尝试 .toggle() 在此处显示/隐藏工作示例 示例

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

});

于 2013-02-18T21:28:18.893 回答
0

您的主要问题是您的标记无效。正因为如此，#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>

在这里查看一个活生生的例子。

于 2013-02-18T21:30:59.213 回答