リンクされたWebページが表示されているときにのみ表示されるリンクのスタイルを設定することはできますか？

StackOverflow https://stackoverflow.com/questions/195578

  •  10-07-2019
  •  | 
  •  

質問

このような問題が発生しました（これはhtml / cssメニューです）：

Eショップ|別のeショップ|別のeショップ

クライアントは次のように動作することを望んでいます：

ユーザーがWebサイトにアクセスし、Eshopをクリックします。 Eshopは赤いボックスのアウトラインで赤色に変わります。ユーザーが別のeショップにアクセスすることにしたので、Eショップは赤いボックスのアウトラインなしで通常の色に戻り、別のeショップは再び赤いアウトライントリックを行います。

A：visitedがあることは知っていますが、アクセスしたすべてのメニューリンクを赤いボックスアウトラインで赤くしたくないです。

ヘルプについてはThx：）

役に立ちましたか？

解決

Joe Skoraが書いたものと同じですが、より具体的です：

.red {
    outline-color:red;
    outline-width:10px;
}

今では、click-event-handlerでJavascriptを使用できます（この例では jQuery を使用）：

$('.red').removeClass('red'); // removes class red from all items with class red
$(this).addClass('red'); // adds class red to the clicked item

別の方法は、疑似セレクター：targetの使用です。
それについての情報： www.thinkvitamin.com

他のヒント

CSSとHTMLを使用してこれを行うことができます。一般的に使用する方法は、各ナビゲーションアイテムに一致するIDとクラスセレクターを使用することです。

これの利点は、ページごとにメニューコードを変更する必要がなく、ページ自体を変更することです。すべてが完全に動的です。

次のように機能します：

<!-- ... head, etc ... -->
<body>

<ul class="nav">
    <li><a href="home.html" class="nav-home">Home</a></li>
    <li><a href="art.html" class="nav-art">Art</a></li>
    <li><a href="contact.html" class="nav-contact">Contact</a></li>
</ul>

<!-- ... more page ... -->

</body>

次に、次のようなCSSを設定します。

#NAV-HOME .nav-home,
#NAV-ART .nav-art,
#NAV-CONTACT .nav-contact { color:red; }

<！> quot; current <！> quot;を変更するにはメニュー項目では、対応するIDをドキュメントの構造の上位の要素に割り当てることができます。通常、<！> lt; body <！> gt;に追加します。タグ。

<！> quot; Art <！> quot;を強調表示するにはページ、あなたがしなければならないのはこれだけです：

<!-- The "Art" item will stand out. -->
<body id="NAV-ART">

<ul class="nav">
    <li><a href="home.html" class="nav-home">Home</a></li>
    <li><a href="art.html" class="nav-art">Art</a></li>
    <li><a href="contact.html" class="nav-contact">Contact</a></li>
</ul>

<!-- ... more page ... -->

</body>

CSSクラスでこれを行うことができます。たとえば、 selected クラスは現在のショップを識別し、色とアウトラインを変更できます。次に、メニュー項目からクラスを追加/削除して、選択を変更できます。

こちらを見て、CSSメニューの作成に関するチュートリアルをご覧ください。 。

基本的に、CSSだけではできません。スクリプトを作成する必要があります（サーバーまたはクライアント側、できればサーバー）。他の人が示唆しているように、「選択された」クラス（または類似のもの）をアクティブリンクに追加し、CSSでそのスタイルを定義します。

たとえば、リンク：

 <a href="#">Eshop</a> | <a href="#" class="selected">Another eshop</a> | <a href="#">Another eshop</a>

スタイル：

.selected {
     font-weight:bold;
     color:#efefef;
}

リンクは、たとえばPHPを使用して動的に生成されます。

 <?php
 foreach(array('eshop' => '#','another eshop' => '#','yet another eshop' => '#') as $title => $url) {
      echo '<a href="' . $url . '"' 
           . ($url == $_SERVER['REQUEST_URI'] ? ' class="selected"' : null) 
           . '>' . $title . '</a>'; 
 }

ブラウザウィンドウで新しいページに移動する場合、ザックマルグルーおよびボビージャックどちらにも優れた答えがあります。

新しいウィンドウでeshopリンクを開く場合、cssだけではできることはあまりありません。クラス名（赤）。

どちらですか？

私が知る限り、これはすべてのページに異なるコードを生成する（現在のページに異なるクラスを設定する）か、JavaScriptを使用してページの読み込み後にメニューを変更することによってのみ実行できます。

このような属性セレクターを使用できます... 

a[href^="http:\\www.EShop"]:visted { color: red; }

そうすることで、http：\ Eshop.comで始まるhrefがあり、visitされているリンクをこのスタイルに適用します。

ページの構築方法に依存しますが、従来のCSSはこれを行うためにボディのidと各ナビゲーションリンクを使用していたため、次のようなものがあります：

eshop.html 

<body id="eshop">
  <ul>
    <li><a href="" id="link-eshop">Eshop</a></li>
    <li><a href="" id="link-aeshop">Another eshop</a></li>
    <li><a href="" id="link-eshop-three">Another eshop</a></li>
  </ul>
</body>

および対応するCSS：

#eshop #link-eshop, #aeshop, #link-aeshop, #eshop-three #link-eshop-three
{
    color: red;
    outline: 1px solid red;
}

ナビゲーションは一貫しています。本文のIDのみがページごとに変わります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top