Question

我有一堆锚链接，我使用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（）隐藏，相应的页面将淡入。这一切都没有问题。< / p>

但我想缩短这段代码。如你所知，如果我说50页，javascript部分会变得非常混乱，因为我必须写50次相同的行。我的所有链接都有类＆＃34; _button＆＃34;对应于＆＃34; _page＆＃34;，所以我认为应该有一个快捷方式，只需要一个功能？类似的东西：

点击[班级名称]后，删除＆＃34;按钮＆＃34;班级名称的一部分
然后追加＆＃34;页面＆＃34;到名称的末尾
例如，＆＃34; aboutbutton＆＃34;单击，将名称更改为＆＃34; about＆＃34;，然后添加＆＃34; page＆＃34;，这将成为＆＃34; aboutpage＆＃34;
然后显示div

但我不确定如何写这个。谢谢你的帮助。

Answer 1

您可以在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();
});

Answer 2

试试这个：

$(function() {
  $("a[href^='#']").click(function() {
    $(".pagecontainer>div").fadeOut(0);
    $(this.getAttribute("href")).fadeIn();
  });
  $(".pagecontainer").fadeIn();
  $("#homepage").fadeIn();
});

如何在不使用每个功能的情况下处理非常相似的按钮？

2 个答案: