javascript - 显示和隐藏 jQuery 选项卡

Question

我有以下配置:

var pageone = document.getElementById("pageone"),
    pagetwo = document.getElementById("pagetwo"),
    pagethree = document.getElementById("pagethree"),
    bfpone = document.getElementById("buttonone"),
    bfptwo = document.getElementById("buttontwo"),
    bfpthree = document.getElementById("buttonthree");
$(pagetwo).hide();
$(pagethree).hide();
$(bfpone).click(function () {
    $(pageone).show();
    $(pagetwo).hide();
    $(pagethree).hide();
});
$(bfptwo).click(function () {
    $(pageone).hide();
    $(pagetwo).show();
    $(pagethree).hide();
});
$(bfpthree).click(function () {
    $(pageone).hide();
    $(pagetwo).hide();
    $(pagethree).show();
});

.page{
    background:red;
    color:white;
    margin:2em;
    padding:1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttonone">Btn one</div>
<div id="buttontwo">Btn two</div>
<div id="buttonthree">Btn three</div>
<div id="pageone" class="page">Pageone</div>
<div id="pagetwo" class="page">Pagetwo</div>
<div id="pagethree" class="page">Pagethree</div>

当点击特定于页面的 div 时，所选页面显示，而其他页面隐藏。

它工作正常，但我想要一个更高效的 jQuery 脚本，当我添加任意数量的页面时，无需修改即可工作(或者至少无需添加更多代码即可工作)。唯一的条件是它必须仅使用 javascript 和 jQuery。

谢谢。

Answer 1

您可以使用如下的通用解决方案，而不是为每个元素使用单独的处理程序

var $pages = $('.page');
$pages.slice(1).hide();
$('.trigger').click(function() {
  var $target = $('#' + $(this).data('target')).show();
  $pages.not($target).hide()
});

.page {
  background: red;
  color: white;
  margin: 2em;
  padding: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="trigger" data-target="pageone">Btn one</div>
<div class="trigger" data-target="pagetwo">Btn two</div>
<div class="trigger" data-target="pagethree">Btn three</div>
<div id="pageone" class="page">Pageone</div>
<div id="pagetwo" class="page">Pagetwo</div>
<div id="pagethree" class="page">Pagethree</div>