1

jQuery hashchange 関数を機能させるのに問題があります。これは私が今まで使用したことのないものであり、私が望むように機能しない理由もわかりません。
6 つのセクションを持つ「about」ページがあります。これらの各セクションはサブメニューで表示/非表示になっているため、一度に 1 つのセクションしか表示されません。しかし、これらにハッシュを付けて、他のページからリンクできるようにしたいと考えています。これが私のコードです。私が抱えている問題を説明します:

jQuery:

$(document).ready(function(){
$('.about').hide();
$('#section01').show();

$(function(){
$(window).on('hashchange', function(){
        var hash = window.location.hash;
     $('.sub-menu').each(function(){
           $('.about').hide();
           $('#section'+$(this).attr('hook')).fadeIn();
           return false;
    });  

});
});
$(window).hashchange();
});

HTML:

<div id="content-wrap"> 


    <div id="sub-menu">
        <li id="sub-menu-01" class="sub-menu" hook="01"><a href="#about01">SECTION01</a></li>
        <li id="sub-menu-02" class="sub-menu" hook="02"><a href="#about02">SECTION02</a></li>
        <li id="sub-menu-03" class="sub-menu" hook="03"><a href="#about03">SECTION03</a></li>
        <li id="sub-menu-04" class="sub-menu" hook="04"><a href="#about04">SECTION04</a></li>
        <li id="sub-menu-05" class="sub-menu" hook="05"><a href="#about05">SECTION05</a></li>
        <li id="sub-menu-06" class="sub-menu" hook="06"><a href="#about06">SECTION06</a></li>
    </div>


        <div id="section01" class="about">
CONTENT GOES HERE
        </div>

        <div id="section02" class="about">
CONTENT GOES HERE
        </div>

        <div id="section03" class="about">
CONTENT GOES HERE
        </div>              

        <div id="section04" class="about">
CONTENT GOES HERE
        </div>

        <div id="section05" class="about">
CONTENT GOES HERE
        </div>

        <div id="section06" class="about">
CONTENT GOES HERE
        </div>

</div>

したがって、正常にクリックすると.sub-menu、ハッシュなどが追加されます#about01 #about02。しかし、関連するセクションがフェードインするのではなく、フェードインし続けるだけで、#section01理由がわかりません。
hashchange を導入する前は、この機能はうまく機能していましたが、現在は、どのセクションをクリックしても、関連するセクションが表示されませ#section01ん.sub-menu。

4

1 に答える 1

0

を使用するのではなく、 and.attr hookを使用data-hookし.dataます。それは問題ではありません。

「フック」値がハッシュと一致したことを実際に比較したことはありません。

if ($(this).attr('hook') === hash.replace('#about', '')) {

ハッシュが空の場合は最初のセクションも表示する必要がありますが (おそらく)、それを理解できるはずです。

http://jsfiddle.net/wkHj2/

于 2013-02-17T15:32:10.493 に答える