javascript - 新しいページのロード時にタブを永続的にアクティブに保つ

Question

現在、タブをクリックして新しいページをロードすると、クリックする前のタブのホバー状態が保持されず、新しいページがロードされたときに元のタブにデフォルト設定されるタブベースのレイアウトがあります。上の設定。

購入時のテンプレートは、私が探しているアクションとしてここで伝えようとしているとおりでした (リンクを参照)。リンクが提供されていない私の現在の作品は、最初に購入した製品のように固執しないことに関して私が話していることです.

マイページ

Answer 1

これがあなたが参照しているものかどうかはわかりませんが、たとえば、[要素]タブを表示しているときにページを更新すると、[要素]タブでページを再読み込みする必要があると思います。選択されました。

これを行う一般的な方法は、ハッシュタグとJavaScriptロジックを使用することです。具体的には、各タブは実際には<a />タグであり、現在、それぞれにURLがありhref='#'ます。これはハッシュタグリンクであることを意味します。ただし、これらはすべてベースハッシュにリンクしています。

通常、表示されるのは、各タブに異なるハッシュ参照があり、ページが想定されている異なる表示モードを参照していることです。したがって、URLにが含まれている場合#dashboard、ページのJavaScriptはすぐにそれを認識します。ページが読み込まれると、ダッシュボードが表示されるはずです。一方、URLにが含まれている#elements場合は、[要素]タブが表示されます。

この種のことを処理するいくつかの堅実なプラグインがありますが、UIを大幅に書き直すことはありません（これはすでにかなり洗練された外観です）-ハッシュが何であるかを理解するためにjQueryを少し実行することをお勧めします、およびロード時にチェックします。

ハッシュタグを操作するいくつかの方法の例として、スタックオーバーフローの質問を見てください。URLから特定のハッシュタグの値を取得します。