我有以下配置:
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>
它可以正常工作,但我希望有一个更有效的jQuery脚本,无论我添加多少个页面,都不需要修改(或者至少不需要添加更多的代码即可工作)。唯一的条件是它必须只使用javascript和jQuery。
谢谢。