Win*_*and 2 javascript jquery append hyperlink
我有一堆锚链接,我使用javascript淡入不同的div来模仿页面.
<script type="text/javascript">
$(document).ready(function() {
showHomePage();
$('.homebutton').click(function() {
displayNone();
showWindow("homepage");
} );
$('.aboutbutton').click(function() {
displayNone();
showWindow("aboutpage");
} );
$('.gallerybutton').click(function() {
displayNone();
showWindow("gallerypage");
} );
$('.musicbutton').click(function() {
displayNone();
showWindow("musicpage");
} );
function displayNone() {
$('.pagecontainer>div').fadeOut(0);
}
function showHomePage() {
$('.pagecontainer').fadeIn();
$('#homepage').fadeIn();
}
function showWindow(name) {
$('#' + name).fadeIn();
}
});
<body>
....
....
<a href="#homepage" class="homebutton">Home</a>
<a href="#aboutpage" class="aboutbutton">About</a>
<a href="#gallerypage" class="gallerybutton">Gallery</a>
<a href="#musicpage" class="musicbutton">Music</a>
....
....
<div id="homepage">Home page</div>
<div id="aboutpage">About page</div>
<div id="gallerypage">Gallery page</div>
<div id="musicpage">Music page</div>
....
</body>
首先将所有页面设置为隐藏(alpha = 0),并且当单击链接时,当前显示的任何页面都设置为使用displayNone()隐藏,相应的页面将淡入.这一切都没有问题.
但我想缩短这段代码.如你所知,如果我说50页,javascript部分会变得非常混乱,因为我必须写50次相同的行.我的所有链接都有" _button"类,对应于" _page",所以我认为应该有一个快捷方式,只需要一个函数？就像是:
但我不知道怎么写这个.谢谢你的帮助.
您可以在HTML中使用多个类,因此您的按钮可能如下所示:
<a href="#homepage" class="button homebutton">Home</a>
<a href="#aboutpage" class="button aboutbutton">About</a>
<a href="#gallerypage" class="button gallerybutton">Gallery</a>
<a href="#musicpage" class="button musicbutton">Music</a>
然后使用单个事件处理程序将它们全部定位.这应该让你开始:
$('.button').on('click', function(e){
e.preventDefault();
// Luckly, your urls match the id selectors
// do not use this.href, as it will return the full, resolved url
// (see Kolink's answer)
$(this.getAttribute("href")).fadeIn();
});