現在のページに基づくHTMLラッパー状態の更新

運賃一茶

私はHTML / CSSの完全な初心者です。私は現在、別のページにリダイレクトするリンクを含むラッパーをWebサイトに持っています。私の目的は、それぞれのページにいるときに押されように見えるようリンクを更新することです。

この例としては、スタックオーバーフローが発生しているときに[ジョブ]ページをクリックすると、stackoverflow.com / jobsにリダイレクトされ、そのリンクが強調表示/押されます。

私の理解では、ラッパーを実装する方法はコンテナーを使用することです。

<!-- Wrapper -->
  <div id="wrapper">
    <!-- Header -->
    <header id="header">
      <h1><a href="index.html">myname</a></h1>

        <nav class="links">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="resume.html">Resume</a></li>
            <li><a href="about.html">About</a></li>
          </ul>
        </nav>
     .
     .
     .

私のプロジェクトは、_wrapper.scssファイルを含む既成のSASSテーマです。SASSファイルをコンパイルしてCSSに変換する方法を学ぶ準備ができていないと思うので、このファイルを編集するつもりはありませんが、希望する結果を得る別の方法はありますか?

onmouseoveronmouseoutイベントはよく知っていますが、達成したいイベントはありますか?

ありがとう!

デイブアンダーソン

あなたがに割り当てることができるCSSクラスを定義開始するにはli、それがされていることを示すために、それの外観変更する要素押された例を

li.pressed { font-weight: bold; }

次にli、ロードされたページに基づいて、このクラスを正しい要素に適用する方法が必要です。各ページのナビゲーションをカットアンドペーストするだけで、手動でこれを行うことができます。

<li class="pressed"><a href="resume.html">Resume</a></li>

このアプローチは、サイトにページを追加するにつれてうまく拡張できません。クラス属性を割り当てるスクリプトへのパラメーターとしてページを提供できる必要があります。

使用するスクリプトは、クライアントまたはサーバーで実行できます。パラメータの正しい値を取得する方法は、スクリプトが実行される場所によって異なります。

サーバーサイドスクリプトは、ページのHTTPリクエスト内の情報を使用しhrefて、押されたボタンの情報と一致させます。

クライアント側のスクリプトはwindow.locationプロパティを使用hrefし、押されたボタンに一致するものを見つける必要があります。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

現在の時刻に基づくJavascriptページの更新

分類Dev

フラッターの状態に基づいて次のページに移動します

分類Dev

Vuex-モジュールの状態に基づく計算されたプロパティはディスパッチ時に更新されませんか?

分類Dev

ページの更新時にHTMLページの状態を保存する

分類Dev

前の子の状態に基づく兄弟ノードのXPATH

分類Dev

ページの状態をパラメータとして現在のルートに保存する

分類Dev

ルックアップに基づくハンドルバーの状態

分類Dev

状態に基づくReactコンポーネント間のライブアップデート

分類Dev

パンダの行の状態に基づいて数値をフォーマットする方法to_html

分類Dev

状態のフラッターに基づいてウィジェットの色を変更する方法

分類Dev

React:スクロールされた現在のページに基づいてカウンターの状態を変更する方法

分類Dev

Zurb Foundation forAppsアプリの現在のページに基づく動的なトップバーテキスト

分類Dev

アグリゲートの状態変化に基づくアグリゲートの一括更新

分類Dev

ページ更新時のVuex状態

分類Dev

Seleniumは、ページ上のボタンをクリックした後も、以前のページの状態を使用しています。ブラウザ/ HTMLコードの状態に更新する方法は?

分類Dev

パンダの特定の状態に基づく日数の時差

分類Dev

パンダの特定の状態に基づく日の時差

分類Dev

別のシリーズの状態に基づいてパンダシリーズを更新します

分類Dev

postgresの状態に基づく部分的な更新

分類Dev

別のページのチェックボックスの状態に基づいてDIVを表示または非表示にする方法は?

分類Dev

ページの状態を電話のフラッターに保存する方法

分類Dev

現在の状態に基づいてUIビューにクラスを追加します

分類Dev

条件に基づくパッケージの依存関係[debian]

分類Dev

列の状態に基づくパンダcumsum

分類Dev

NLogに基づく一般的なログのラッパー?

分類Dev

コンポーネントの状態値に基づくwhileループ

分類Dev

共有設定に基づくフラッターセットの起動ページ

分類Dev

クローラーのクエリ文字列に基づくhtaccessブロックページ

分類Dev

エラーメッセージの後に状態を更新する-Firebase-ReactNative

Related 関連記事

  1. 1

    現在の時刻に基づくJavascriptページの更新

  2. 2

    フラッターの状態に基づいて次のページに移動します

  3. 3

    Vuex-モジュールの状態に基づく計算されたプロパティはディスパッチ時に更新されませんか?

  4. 4

    ページの更新時にHTMLページの状態を保存する

  5. 5

    前の子の状態に基づく兄弟ノードのXPATH

  6. 6

    ページの状態をパラメータとして現在のルートに保存する

  7. 7

    ルックアップに基づくハンドルバーの状態

  8. 8

    状態に基づくReactコンポーネント間のライブアップデート

  9. 9

    パンダの行の状態に基づいて数値をフォーマットする方法to_html

  10. 10

    状態のフラッターに基づいてウィジェットの色を変更する方法

  11. 11

    React:スクロールされた現在のページに基づいてカウンターの状態を変更する方法

  12. 12

    Zurb Foundation forAppsアプリの現在のページに基づく動的なトップバーテキスト

  13. 13

    アグリゲートの状態変化に基づくアグリゲートの一括更新

  14. 14

    ページ更新時のVuex状態

  15. 15

    Seleniumは、ページ上のボタンをクリックした後も、以前のページの状態を使用しています。ブラウザ/ HTMLコードの状態に更新する方法は?

  16. 16

    パンダの特定の状態に基づく日数の時差

  17. 17

    パンダの特定の状態に基づく日の時差

  18. 18

    別のシリーズの状態に基づいてパンダシリーズを更新します

  19. 19

    postgresの状態に基づく部分的な更新

  20. 20

    別のページのチェックボックスの状態に基づいてDIVを表示または非表示にする方法は?

  21. 21

    ページの状態を電話のフラッターに保存する方法

  22. 22

    現在の状態に基づいてUIビューにクラスを追加します

  23. 23

    条件に基づくパッケージの依存関係[debian]

  24. 24

    列の状態に基づくパンダcumsum

  25. 25

    NLogに基づく一般的なログのラッパー?

  26. 26

    コンポーネントの状態値に基づくwhileループ

  27. 27

    共有設定に基づくフラッターセットの起動ページ

  28. 28

    クローラーのクエリ文字列に基づくhtaccessブロックページ

  29. 29

    エラーメッセージの後に状態を更新する-Firebase-ReactNative

ホットタグ

アーカイブ