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ページと言っているかどうかわかるように、ほぼ同じ行を50回記述しなければならないため、javascriptの部分は非常に乱雑になります。私のすべてのリンクには「_page」に対応するクラス「_button」があるので、1つの関数だけを必要とするこれへのショートカットがあるべきだと思いますか？何かのようなもの：

  • [クラス名]をクリックした場合、クラス名の「ボタン」部分を削除してください
  • 次に、名前の最後に「ページ」を追加します
  • たとえば、「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 に答える