0

history.jsが自動的に変更されることに気づきました

http://www.site.com/some/path#/other/path

に

http://www.site.com/other/path

html5対応のブラウザで。これは問題ありませんが、実際にはブラウザを/ other / pathにリダイレクトせず、アドレスバーのURLを変更するだけです。リダイレクトするためにも必要です。私はこれをキャッチしようとしました：

<script>
    $(function() {
        $(window).on('statechange', function() {
            var State = History.getState();
            console.log('state', State.url);
        });
    });
</script>

しかし、statechangeイベントは発生しません...では、どうすればリダイレクトを実行できますか？

4

1 に答える 1

0

これには URL に頼る必要があります。backbone.js ルーティングのような優れたフレームワークや、history.js のようなプラグインさえあります。

しかし、このプラグインがなければ、URL からハッシュ bang を取得し、それに対応するリストにアクティブなスタイルを適用できます。

そのためには、HTML は次のようなものでなければなりません。

<ul id="ulid" class="">
        <li class="">
            <a href="#tab=one" id="one" class="active">text1</a>
        </li>
        <li>
            <a href="#tab=two" id="two" class="">text2</a>
        </li>
        <li>
            <a href="#tab=three" id="three" class="">text3</a>
        </li>
        <li>
            <a href="#tab=four" id="four" class="">text4</a>
        </li>
        <li>
            <a href="#tab=five" id="five" class="">text5</a>
        </li>
        <li>
            <a href="#tab=six" id="six"  class="">text6</a>
        </li>
    </ul>

アクティブなクラス css の場所:.active{background-color: red;}

ハッシュバンを取得するための短いアドオンコードは次のとおりです。

function parseHashBangArgs(aURL) {

aURL = aURL || window.location.href;

var vars = {};
var hashes = aURL.slice(aURL.indexOf('#') + 1).split('&');

for(var i = 0; i < hashes.length; i++) {
   var hash = hashes[i].split('=');

   if(hash.length > 1) {
       vars[hash[0]] = hash[1];
   } else {
      vars[hash[0]] = null;
   }      
}

return vars;
}

次に、ページの読み込み時にこのコードを実行できます

$('ul#ulid li a').click(function(){
    $('li a').removeClass('active');
    $(this).addClass('active');
});

var selectedTab = parseHashBangArgs(window.location.href).tab;
if(selectedTab){
    $('li a').removeClass('active');
    $('#'+selectedTab).addClass('active');
}

そして完成！

于 2013-08-05T13:35:36.440 に答える