0

サイドナビゲーションのあるページを作成しました。各オプションをクリックすると、特定のDIVが表示され、他のDIVは非表示になります。このためにjQueryを作成しましたが、これは魅力のように機能します。

私が困惑しているのは、他のページのリンクが実際にこのページの別のセクションにリンクしている可能性があるかどうかです。つまり、このページを開いてセクション1が表示されている「セクション1」へのリンクと、このページを開いてセクション2がすでに表示されている「セクション2」へのリンクです。

誰か助けてもらえますか？

<style type="text/css">
    #content div.section    {   display:none;   }
    #content div.one    {   display:block;  }
</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>    
<script type="text/javascript"> 
$(document).ready(function() {
    $('#side_nav ul li a').click(function() {
        $('#side_nav ul li.current').removeClass('current');
        $(this).parent().addClass('current');

        var filterVal = $(this).attr('class');

            $('#content div.section').each(function() {
                if($(this).hasClass(filterVal)) {
                    $(this).fadeIn(200);
                } else {
                    $(this).hide();
                }
            });
        return false;
    });
});
</script>

<section class="main wrapper">
    <div id=side_nav>       
        <ul>
            <li class=current><a href="#" class=one>TOPIC ONE</a></li>
            <li><a href="#" class=two>TOPIC TWO</a></li>
            <li><a href="#" class=three>TOPIC THREE</a></li>
        </ul>
    </div>

    <div id=content>
        <div class="section one">
            <h3>Subtitle</h3>
            <p>One Content</p>
            <br>
            <h3>Subtitle</h3>
            <p>One Content</p>
        </div>
        <div class="section two">
            <h3>Subtitle</h3>
            <p>Two Content</p>
            <br>
            <h3>Subtitle</h3>
            <p>Two Content</p>
        </div>                                      
        <div class="section three">
            <h3>Subtitle</h3>
            <p>Three Content</p>
            <br>
            <h3>Subtitle</h3>
            <p>Three Content</p>
        </div>
</section>

'window.location.hash'を使用して着信リンククリックからハッシュタグをキャプチャし、適切なdivを表示するために上記のJavascriptに渡す方法を誰かが詳しく説明できますか？

4

3 に答える 3

1

ドキュメントの URL にハッシュを追加して、展開する必要があるセクションを特定します。

http://www.mysite.com/#two

次に、JavaScriptを介して確認し、適切な領域を展開します

var hash = location.hash.replace('#','');
if (hash != '') {
    $('a.' + hash).addClass('current');  //selector is equiv of $('a.two')
}
于 2013-01-14T06:40:07.713 に答える
1

他のページからのリンクに追加情報が含まれている場合、ページがロードされたときに、どのセクションを表示する必要があるかを検出できます。

値を取得するためにyourpage.html#one使用するなど、着信リンクのハッシュ値としてリンク クラス値を提供できます。window.location.hash

あなたの場合、document.ready()ハンドラーにコードを追加して、着信リンクに値があるかどうかを確認し、必要に応じてセクションを表示できます。

編集:実装の例を含めるように更新します。

<script type="text/javascript"> 
    $(document).ready(function() {

        var hashFromLink = window.location.hash != '' ? window.location.hash.replace('#','') : "";
        loadSection(hashFromlink);

        $('#side_nav ul li a').click(function() {
            $('#side_nav ul li.current').removeClass('current');
            $(this).parent().addClass('current');

            var filterVal = $(this).attr('class');

            $('#content div.section').each(function() {
                if($(this).hasClass(filterVal)) {
                    $(this).fadeIn(200);
                } else {
                    $(this).hide();
                }
            });
            return false;
        });
    });

    function loadSection(filterVal) {
        $('#content div.section.' + filterVal).fadeIn(200);                // this should fade in the section with the location hash class
        $('#side_nav ul li a.' + filterVal).parent().addClass('current');  // this should find the anchor tag in the nav and apply the current class to its parent
    }
</script>

もう少し注意してください。明らかに、これはあなたができる1つの方法にすぎません。これらのセレクターは機能するはずであり、ハッシュ値からの入力をサニタイズすることもできます。

于 2013-01-14T06:49:16.830 に答える
0

mrtshermansの回答から構築します（私にとってはうまくいきました...ありがとう！）...

if (ハッシュ == '') {

//空またはnullの場合はハッシュ

}

if(ハッシュ!=='' {

//ハッシュが設定されている場合は何かをする

$('a.' + ハッシュ).css('color', '#ffffff');

}

一部のCSSを有効にするには、「=」ではなく「==」を使用する必要があることに注意してください。

于 2013-03-12T21:41:57.467 に答える