javascript - 如何单击链接(菜单)打开选项卡？

Question

我试图从菜单中单击链接以打开选项卡(div)，但找不到解决方案。

<div>   
  <ul>
    <li><a href="#tabs1" class="select">tabs1</a></li>
    <li><a href="#tabs2">tabs2</a></li>   
  </ul> 
</div>

<div id="tabs1" class="active"></div>
<div id="tabs2"></div>

当我打开表单 1.html(没有标签)并单击菜单以在 2.html 中打开标签 2 时，它不起作用。有任何想法吗？谢谢!

更新 - 这是我的脚本。

$("a#tabs-1").click(function () {
    $("a#tabs-2").removeClass("active");
    $(this).addClass("active");
});
$("a#tabs-2").click(function () {
    $("a#tabs-1").removeClass("active");
    $(this).addClass("active");
    return false;
});

Answer 1

这是我能为您提供的最简单的代码和最简单的 CSS。这是 fiddle .

$(".tabs1").click(function () {
    $("#tabs2").removeClass("active");
    $("#tabs1").addClass("active");
});
$(".tabs2").click(function () {
    $("#tabs1").removeClass("active");
    $("#tabs2").addClass("active");
});

#tabs1, #tabs2 {
    display: none;
}
#tabs1.active, #tabs2.active {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>   
  <ul>
    <li><a href="#tabs1" class="select tabs1">tabs1</a></li>
    <li><a href="#tabs2" class="tabs2">tabs2</a></li>   
  </ul> 
</div>

<div id="tabs1" class="active">tab1</div>
<div id="tabs2">tab2</div>

希望对您有所帮助。