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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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();
});

找到工作小提琴 HERE 。

Answer 3

您可以使用jQuery标签。您可以使用选项卡索引对其进行配置。例如; $（ “＃yourDivName”）选项卡（）。然后您可以设置初始化时哪个处于活动状态。哪个被禁用或启用，显示或隐藏。您可以点这个链接;

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

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属性。

显示和隐藏jQuery选项卡

4 个答案: