URLの変更が選択されていない

私がページを更新すると、以前に選択したタブ（選択したタブを保持）にアクティブにする必要があります。だから私は単純なhtmlページを作成し、いくつかのjQueryを追加します。
しかし、私はfile:///home/2.html#homeURLの変更が選択されていない

にfile:///home/2.html#newsのように手動でURLを変更した場合、それはページのコンテンツのみを変更しますが、選択されたタブを、変更されません。。

ここに私のコードです。

<body> 
    <ul> 
     <li id="first"><a href="#home">Home</a></li> 
     <li id="second"><a href="#news">News</a></li> 
     <li id="third"><a href="#contact">Contact</a></li> 
     <li id="forth"><a href="#about">About</a></li> 
    </ul> 
    <p id="home"> 
     home section 
    </p> 
    <p id="news"> 
     news section 
    </p> 
    <p id="contact"> 
     contact section 
    </p> 
    <p id="about"> 
     about section 
    </p> 
</body> 
    <style> 
    p{ 
    display: none; 
    } 
    :target { 
    display:block; 
     border: 2px solid #D4D4D4; 
     background-color: #e5eecc; 

    } 
    </style> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     if(localStorage.getItem("active_state") == null){ 
      activeStateId = "first"; 
     } 
     else{ 
      activeStateId = localStorage.getItem("active_state") 
     } 
     $('#'+activeStateId).addClass('active'); 
     $('li').click(function(){ 
      $('.active').removeClass('active'); 
      $(this).addClass('active'); 
      localStorage.setItem("active_state", $(this).attr('id')); 
     }); 
    }); 
</script>

出典

2016-11-20 TheVinspro

はおそらく、サーバー上でこのページを実行する必要があります。 localStorageはドメイン固有のもので、ファイルプロトコルを使用するときには使用できません。あなたがまだローカルホストサーバーを設定していないのなら、それは簡単で、実行する方法はたくさんあります。すべてを簡単に調べます。 Web開発は、ファイルプロトコルを使用して行われることはほとんどありません.AJAX – charlietfl

など、他の制限があります。回答には@charlietflに感謝します。単純なhtmlを作成することで、どうやってこれを行うことができますか？ – TheVinspro

@ TheVinsproおそらくできません。私はあなたがファイルプロトコルのいくつかの制限を取り除くChromeを起動できるというフラグがあると思いますが、一般的に言えば、charlietflのようにローカルサーバを使うか、自動的に開発ツールを使うのが良いでしょう、WebStorm – hlfrmn

リンクハッシュがあると、実際にはページをリロードしませんが、ブラウザはこれらのリンクをトリガーします。 #hashがURLを変更するたびに評価されるCSS :target変更ルールに依存しています。

p { 
    display: none; 
} 

:target { 
    display:block; 
    border: 2px solid #D4D4D4; 
    background-color: #e5eecc; 
}

このように、ページを更新しなくても、すべてのセクションが正しく更新されました。このような機能を持たせるには、URL上でハッシュを使用しているため、ローカルマシンまたはリモートマシンにデータを格納する必要はありません。ただ、このようなリンクに.activateクラスを追加するためにハッシュを使用してhashchangeイベントを処理：

$(document).ready(function() { 
    var hash = window.location.hash; 

    if(hash.length > 0) { 
     hash = hash.substring(1); 
     $('li a[href$='+hash+']').parent().addClass('active'); 
    } 

    $(window).on('hashchange', function() { 
     $('.active').removeClass('active'); 
     var hash = window.location.hash 
     if(hash.length > 0) { 
      hash = hash.substring(1); 
      $('li a[href$='+hash+']').parent().addClass('active'); 
     } 
    }); 
});

は、ここに私の作業例を確認してください：http://zikro.gr/dbg/html/urlhash.html#about

出典

2016-11-20 23:08:25

のように@Christos Lytras、ありがとうございました。 – TheVinspro

@TheVinsproうれしい私の答えはあなたのために働いています。それがあなたを助けた場合は、受け入れられた回答としてマークしてください。どのように回答を受け入れ可能と見なすことができるかを確認するには、[回答の受け取りはどうすればよいですか？]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work）を参照してください。 –

URLの変更が選択されていない

答えて

関連する問題