2

我有一堆锚链接，我使用 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 次。我所有的链接都有对应于“_page”的类“_button ”，所以我认为应该有一个只需要一个功能的快捷方式？就像是：

  • 点击【类名】时，删除类名的“按钮”部分
  • 然后将“page”附加到名称的末尾
  • 例如点击“aboutbutton”时，将名称改为“about”，然后添加“page”，变成“aboutpage”
  • 然后显示那个div

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

4

2 回答 2

8

您可以在 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();
});
于 2013-03-01T22:09:23.063 回答
2

尝试这个：

$(function() {
  $("a[href^='#']").click(function() {
    $(".pagecontainer>div").fadeOut(0);
    $(this.getAttribute("href")).fadeIn();
  });
  $(".pagecontainer").fadeIn();
  $("#homepage").fadeIn();
});
于 2013-03-01T22:11:05.507 回答