Jqueryは別のページからタブをアクティブにします

Question

私は別のページにボタンがあり、ユーザーがそれをクリックすると、別のページにリダイレクトして、アクティブなクラスをwindow.location.hashのタブに追加する必要があります。しかし、それは動作しません。そのページにリダイレクトされます。何が間違っているのですか？

HTML：

/* JQUERY */ 
 

 
$("#butonmesaj").on('click', function(){ 
 
    window.location.href = "{% url 'userena_profile_detail' user%}#messages"; 
 
    var id = window.location.hash; 
 
    $(id).addClass('active'); 
 
});

<div role="tabpanel" class="tab-pane" id="messages"> 
 
    <div class="embed-responsive embed-responsive-16by9" style="height: 500px;"> 
 
    <iframe class="embed-responsive-item" src="{% url 'userena_umessages_list' %}"></iframe> 
 
</div>

Answer 1

あなたは、URLに正しくハッシュを設定している、しかし、あなたは、あなたが実際に負荷にクラスを設定するためのページをロードするときなhashchange機能を実行する必要があります。これは、URLを変更すると、アプリケーションを初期化しているため、要求に応じてサーバーに戻ってこない状態が失われているためです。

// callback to set active class based on hash 
 
function hashChange() { 
 
    var id = window.location.hash 
 
    $(id).addClass('active') 
 
} 
 
// bind the callback to hashchange and window.onload 
 
$(window).on('hashchange', hashChange) 
 
$(hashChange) 
 

 
// your standard click listener 
 
$("#butonmesaj").on('click', function() { 
 
    window.location.href = "{% url 'userena_profile_detail' user%}#messages" 
 
});