1

次のような問題が発生しました (これは html/css メニューです):

イーショップ | 別のeショップ | 別のeショップ

クライアントは、次のように機能することを望んでいます。

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

A:visited があることは知っていますが、すべての訪問済みメニュー リンクを赤いボックス アウトラインで赤くしたくはありません。

助けてくれてありがとう:)

4

8 に答える 8

2

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

于 2008-10-12T15:31:19.100 に答える
2

プレーンな 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; }

「現在の」メニュー項目を変更するには、対応する ID をドキュメント構造の上位の要素に割り当てるだけです。通常は <body> タグに追加します。

「アート」ページをハイライトするには、次のことを行うだけです。

<!-- 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>
于 2008-10-13T22:59:43.487 に答える
1

基本的に、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>'; 
 }
于 2008-10-12T15:32:12.627 に答える
1

同じブラウザウィンドウで新しいページに移動する場合、 ZackMulgrewとBobbyJackの両方が優れた答えを持っています。

新しいウィンドウでeショップリンクを開いている場合、cssだけでできることはあまりありません。また、クラス名（red ）を選択する以外は、 gsには妥当な答えがあります。

どっち？

于 2008-10-14T16:57:11.347 に答える
1

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

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

于 2008-10-12T14:59:02.897 に答える
0

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

于 2008-10-12T15:19:27.923 に答える
0

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

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

そうすることで、http:\Eshop.com で始まる href を持つすべてのリンクにこのスタイルを適用することを意味します。

于 2008-10-13T22:35:32.600 に答える
0

ページがどのように構築されているかによって異なりますが、これを行う従来の 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 のみがページごとに変わります。

于 2008-10-13T23:09:01.143 に答える