0

簡単なメニューを作ってみました。そのため、リンクをクリックすると別のページに移動し、そのリンクを選択したことが色の変化によって示されます。

私が抱えている問題は、リスト内のリンクをクリックすると、ページが読み込まれ、何らかの理由でリスト要素がすべてa:visitedフィールドに入力されることです。それらを赤に設定します。私はJSFIDDLE Hereを持っています。私はそれが単純なことを知っていますが、それは私の神経質になっています.

CSS コード:

ul.nav_style{list-style: none;}

ul.nav_style li {padding-left: 1em; text-indent: -.7em;}

ul.nav_style li:before {
    content: "•  ";
    color: #C0C0C0; /* or whatever color you prefer */
}

ul.nav_style li a:link { color: #C0C0C0; text-decoration: none;}
ul.nav_style li a:visited { color: #FF0000; text-decoration: none;}
ul.nav_style li a:hover { color: #58595B; text-decoration: none;}
ul.nav_style li a:active { color: #E6BD13; text-decoration: none;}​

HTML コード:

<ul class="nav_style">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

前もって感謝します。

クリス

4

4 に答える 4

1

説明は簡単です。すべてのリンクが同じ href を持っています。hrefs を変更すると仮定すると、これは最終的なサイトでは問題になりません。:)

私のフィドルを見てください。私がしたことは、hrefsを変更することだけでした。現在、期待どおりに機能していますか？http://jsfiddle.net/TheNix/sR3Ub/3/

編集:
リンクが訪問されたかどうかに関係なく、リンクが同じように見えることを確認したいだけの場合は、次のように、状態:linkと状態に同じスタイルを適用するだけです。:visited

ul.nav_style li a:link,
ul.nav_style li a:visited { color: #C0C0C0; text-decoration: none;}
ul.nav_style li a:hover { color: #58595B; text-decoration: none;}
ul.nav_style li a:active { color: #E6BD13; text-decoration: none;}

これで、リンクはアイドル状態のとき (アクセス済みであっても) 灰色になり、ホバーすると濃い灰色になり、クリックすると金色になります。フィドルを参照してください：http://jsfiddle.net/TheNix/sR3Ub/5/

EDIT v2
リンクの状態について少し混乱しているようですので、ここにローダウンがあります:

:linkは標準のアイドル リンクです (単に としてターゲットにすることもできますa)
:hoverは、カーソルを要素の上に置く行為です。
:visited既に訪問されたリンクに適用されます。
:activeは、リンクがユーザー インターフェイスでアクティブなときの状態です。たとえば、リンクの上にカーソルを置いてマウスの左ボタン (onmousedown) を押したとき、または を使用しTABてリンクを強調表示したときです。マウス ボタン (onmouseup) を離すか、タブ アウトすると、以前の状態に戻ります。

:activeしたがって、それがアクティブなページであるかどうかの判断とは関係なく、マウス ボタンを押したままにしている場合にのみ適用されます。

あなたがやろうとしていることは、残念ながら CSS だけでは不可能です。これを jQuery で実現する簡単な例を次に示します。http://jsfiddle.net/TheNix/sR3Ub/6/

于 2012-11-11T19:17:04.200 に答える
0

問題は解決しました。PHP を使用して配列を使用してリストを生成し、if ステートメントを使用して現在のページに css クラスを与えることにしました。

PHP コード:

if($title == "Enter"){

              $enterArrayPages = array("competition.php","full_detail.php", "judges.php", "get_involved.php", "employers.php");
              $enterArrayText = array("The Competition","Full Detail","The Judges","Get Involved", "Employers");

              echo '<ul class="nav_style">';
              for($i=0; $i<sizeof($enterArrayPages); $i++){

                if($proper_title == $enterArrayText[$i]){
                  echo '<li><a class="linkChange" href="'.$enterArrayPages[$i].'">'.$enterArrayText[$i].'</a></li>';
                }
                else{
                  echo '<li><a class="menu_links" href="'.$enterArrayPages[$i].'">'.$enterArrayText[$i].'</a></li>';
                }
              }
              echo '</ul>';
            }

ご覧のとおり、コードは配列に格納された各ページをループし、ページのタイトルが配列内のタイトルと同じ場合は、そのクラスを変更して、リンクの色を他のページとは異なるものにします。

CSSは次のとおりです。

a.menu_links:link { color: #58595B; text-decoration: none;}
a.menu_links:visited  { color: #58595B; text-decoration: none; }
a.menu_links:active { color: #E6BD13; text-decoration: none; }
a.menu_links:hover  { color: #E6BD13; text-decoration: none; }

.linkChange {
   color: #E6BD13;
   text-decoration: none;
}

それは本当に簡単です。PHP を介してロジックを考えなければなりませんでした。純粋なcssで実装するだけで十分だと思っていましたが、時間の経過とともにPHPに頼りました。

コード出力のイメージを次に示します。

コード出力、私のコードが現在のページを取得し、リンクの色を変更する方法を確認できます。このシナリオでは、メンターとサービスとは強調表示されています。

みんなコメントありがとう！とても有難い！

于 2012-11-11T20:51:29.423 に答える
0

ターゲットURLをhrefまたはdata-hrefなどに配置する必要があり、リンクをクリックして新しいページをロードした後、ウィンドウの位置を確認し、リンクの色を赤に設定する必要があります:

$(function(){
   var url = window.location.href;
   $("ul.nav_style li").each(function(i,e){
      var $this = $(e);
      if ($this.attr("href") == url){
         $this.css("color","red");
      }
   };
});
于 2012-11-11T19:24:25.973 に答える
0

これはブラウザのセキュリティ上の理由かもしれません。http://dbaron.org/mozilla/visited-privacy Mozilla http://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-リーク/これについても通知されました。最新のブラウザーのほとんどは、ユーザーを保護するためにこのアクションを実行しています。

于 2012-11-11T19:16:48.687 に答える