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。

谢谢。

- vanntile

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>

- Arun P Johny

Answer 2

你只需使用jQuery的click()函数来简化代码：

HTML：

<div id="buttonone" data-page='1' class='button'>Btn one</div>
<div id="buttontwo" data-page='2' class='button'>Btn two</div>
<div id="buttonthree" data-page='3' class='button'>Btn three</div>

<div id="page_1" class="page" style='display:block'>Pageone</div>
<div id="page_2" class="page" style='display:none'>Pagetwo</div>
<div id="page_3" class="page" style='display:none'>Pagethree</div>

JS：

$('.button').click(function () {
    $('.page').hide();
    $('#page_'+$(this).data('page')).show();
});

在编程中查找已经运作的 Fiddle，请点击这里。

- Zakaria Acharki

---

它有效。实际上，第三个JS行就是我需要的。 - vanntile

Answer 3

你可以使用jQuery选项卡，并使用选项卡索引进行配置。例如： $("#yourDivName").tabs(); 然后，您可以在初始化时设置哪个选项卡处于活动状态，哪些是禁用或启用的，显示或隐藏的。 您可以访问以下链接：

https://api.jqueryui.com/tabs/

- Vecihi Baltacı

Answer 4

$('.page:gt(0)').hide();
$('.btn').each(function(){
var $btn = $(this);
var index = $btn.attr('rel');
$btn.click(function () {
    $('.page').hide();
    $('.page[rel="' + index + '"]').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 rel="1" class="btn">Btn one</div>
<div rel="2" class="btn">Btn two</div>
<div rel="3" class="btn">Btn three</div>
<div rel="1" class="page">Pageone</div>
<div rel="2" class="page">Pagetwo</div>
<div rel="3" class="page">Pagethree</div>

在上面的例子中，你只需要同步rel属性。

- Ashok Damani