10

だから私はナビゲーションバーを持っています。Zurbを使用して構築：

<div class="seven columns navigation" id="navigation">
    <a href="#">Page1</a>
    <a href="#">Page2</a>
    <a href="#">Page3</a>
    <a href="#">Page4</a>
    <a href="#">Page5</a>
 </div>

ホバーすると、ナビゲーションによって背景色が変わります。簡単です。ただし、リンクがアクティブな場合、バックグラウンドを維持できません。したがって、page1の場合、背景は青色のままです。

これが私がこれまでに試したCSSです。

.navigation a {
  font-size: 1.2em;
  display: inline-block;
  margin-top: 20px;
  padding: 8px 12px;
  color: #666666;
  font-weight: bold; }

.navigation a:hover{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

.navigation a.active{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

#navigation a .active-link{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

それのどれも機能しません、私はこの負荷をグーグルで検索しました、しかしそれはすべてアクティブリンクが機能するべきであると言いますか？

誰かが私がどこで間違っているのか教えてもらえますか？その単純なCSSが私の最強の言語ではない場合は申し訳ありません。

編集：

提案をありがとう、しかし

.navigation a:active{
  background: #29abe2;
  color: #fff;
  border-radius: 5px; }

どちらも機能しません。

4

10 に答える 10

14

ここにエラーがあるはずですが、そう:activeではない.activeので、次のように置き換えます。 

.navigation a.active {
  background: #29abe2;
  color: #fff;
  border-radius: 5px;
}

と：

.navigation a:active {
  background: #29abe2;
  border-radius: 5px; 
  color: #fff;
}

それ以外の場合、アクティブな状態の各ページについて話している場合は、作成したCSSが正しいです。HTMLに、これを追加する必要があります。

<div class="seven columns navigation" id="navigation">
  <a href="#" class="active">Page1</a>
  <a href="#">Page2</a>
  <a href="#">Page3</a>
  <a href="#">Page4</a>
  <a href="#">Page5</a>
</div>

これで、その特定のリンクがアクティブ状態で表示されます。HTMLを使用している場合はページごとに実行する必要があり、PHPなどを使用している場合はプログラミングを使用して実行できます。したがって、PHPでも同じことが言えます。

<div class="seven columns navigation" id="navigation">
  <a href="#"<?php if ($page == 1) echo ' class="active"'; ?>>Page1</a>
  <a href="#"<?php if ($page == 2) echo ' class="active"'; ?>>Page2</a>
  <a href="#"<?php if ($page == 3) echo ' class="active"'; ?>>Page3</a>
  <a href="#"<?php if ($page == 4) echo ' class="active"'; ?>>Page4</a>
  <a href="#"<?php if ($page == 5) echo ' class="active"'; ?>>Page5</a>
</div>
于 2013-02-15T15:37:06.387 に答える
2

純粋なCSSでやりたいことを完全に行うことはできません。まず、ユーザーがそのページにいるときにリンクに使用するクラスを定義する必要があります（あなたが行ったように、タイプミスがあります）。

.navigation a.active-link {
      background: #29abe2;
      color: #fff;
      border-radius: 5px; 
}

次に、ユーザーがそのページにアクセスしたときに、そのクラスをリンクに適用する必要があります。したがって、ページ1を表示している場合、ナビゲーションは次のようになります。

<div class="seven columns navigation" id="navigation">
    <a href="#" class="active-link">Page1</a>
    <a href="#">Page2</a>
    <a href="#">Page3</a>
    <a href="#">Page4</a>
    <a href="#">Page5</a>
 </div>
于 2013-02-15T15:44:23.487 に答える
2

a:visited実際には「.active」状態です。何が起こっているのか不思議に思っていた効果について。

a:そのように利用しようとする場合は、疑似クラスに含める必要があります。

要素の「デフォルト/リセット」状態を確立する<a>と、このタイプの「WTF？」が防止されます。シナリオ：

a:link { color:black }
a:hover { color:blue }
a:visited, a:active, a:focus { color:red }

特定のリンクを対応するページに「強調表示」して表示する場合は、IDまたはクラスを使用することをお勧めします（使用法によって異なります）。

<a id="highlight">Home</a>
<a>About</a>
<a>Contact</a>

編集

質問をもう一度読み直してください。と#navigation a .active-link{...の間のスペースが原因で、は機能していません。実際には、クラス名が。の子をターゲットにしています。修正＃1はになります。a.active-linkaactive-linka.active-link

PHP、Targeterなどについて上記で読んでいることは無視してください。ナビゲーションを「ハイライト」/ナビゲーション内のリンクに一致するページだけに変更しようとしているようです。ストレートHTML/CSSを使用してこれを簡単に行うことができます（これに問題がある場合、サーバー側のコードソリューションはさらにイライラします）。<a>私の答えの3つの要素を参照してください。次に、これをCSSに追加します（修正＃2）。

a#highlight { color:red }

あなたのsnafuはすべて、CSSの「予約済み」の名前に近すぎるクラス名を使用した結果だと思います（したがって、a.activeとa：activeを見逃しました-両方とも有効ですが、次の場合は見逃しがちですあなたはあなたのコードを校正しています）。（修正＃3）

于 2013-02-15T15:44:29.213 に答える
2

CSSのトリックだけでこれを解決するには、セレクターターゲットを使用する必要があります。まず、ページに異なるIDを割り当て、その参照へのリンクを配置してから、ターゲットになっているIDに基づいてスタイルベースを変更します。

これがCSSとHTMLだけのソリューションのJSフィドルです

しかし、基本的には次のように機能します。

IDとターゲットが変更されたHTMLは次のとおりです

<div class="seven columns navigation" id="navigation">
    <a href="#page1" id="page1">Page1</a>
    <a href="#page2" id="page2">Page2</a>
    <a href="#page3" id="page3">Page3</a>
    <a href="#page4" id="page4">Page4</a>
    <a href="#page5" id="page5">Page5</a>
</div>

そして、すべてのcssの後、次のようにターゲットに基づいてスタイルを変更する必要があります。

#page1:target, #page2:target, #page3:target, #page4:target, #page5:target{
  background: #29abe2;
  color: #fff;
  border-radius: 5px;
}

これは機能しますが、通常は、ruby on rails、python、phpなど、正確なURLを提供し、単純なjQuery .addClass（）または.removeClass（）を使用する快適な言語を使用するサーバー側を使用します。 .toggleClass（）でさえ、アクティブなクラスを正しいリンクに配置します。

それが役に立てば幸い！乾杯

于 2013-02-15T16:10:27.070 に答える
1

ブラウザの互換性のためにjQueryで使用する方が良い 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
  $( document ).ready(function() {
    var urlArray = window.location.pathname.split( '/' );
    var pagAtual =urlArray[urlArray.length -1];
    $("a[href*="+pagAtual+"]").css("color","#67E8A7");
  });
</script>
于 2014-02-28T13:55:29.737 に答える
0

アクティブなクラスを作成し、それをナビゲーションバーのリンクに手動で割り当てる必要があります。

HTML + CSSは、それらがどこにあるのかを理解しておらず、行くことができません

「私はarticle.htmlを使用しているので、記事のリンクをアクティブにします。」

そのため、JavaScriptまたはpython、php、aspなどのプログラミング言語を使用して、そのページにいるときにクラスを正しいリンクに割り当てる必要があります。たとえば、サーバー側の言語を使用してナビゲーションを動的に構築します。

于 2013-02-15T15:47:38.567 に答える
0

.navigationを#navigationに置き換えてみてください。クラスではなく、id="navigation"があります。

于 2014-09-01T19:17:09.853 に答える
0

他のニュースでは、mousedownイベント:actionがある場合もキャンセルされます。event.preventDefault()

これはクリックイベントとマウスアップイベントには適用されませんが、：actionの動作をキャンセルせずにpreventDefault（）を使用できます。タッチイベントはテストしていませんが、同じケースになると思います。

于 2018-12-26T09:50:24.923 に答える
0

同じ問題が発生しましたが、次の方法で解決しましたが、奇妙なことがいくつかあります。

app.component.htmlファイル：

    <div class="container">
      <nav class="navbar" >
        <form class="form-inline">
          <a routerLinkActive="active" routerLink="list">List</a>
          <a routerLinkActive="active" routerLink="create" 
             style="padding-left: 20px;">Create</a>
        </form>
      </nav>
      <router-outlet></router-outlet>
    </div>

app.component.cssファイル：

    /* unvisited link */
    a.link {
      color: blue;
    }

    /* selected link */
    a.active {
      color: hotpink;
    }

    /* visited link (This doesn't work well, so I don't use it in my app)*/
    a.visited {
      color: green;
    }

    /* mouse over link */
    a:hover {
      color: red;
    }

ここに画像の説明を入力してください

奇妙なこと：

  1. アクティブなリンクの色の場合、「a.active」は機能しますが、「a：active」は機能しません。

  2. ホバーカラーの場合、「a： hover」は機能しますが、「a.hover」は機能しません。

  3. 訪問したリンクの色について、 「a：visited」を使用すると、他の色が無効になります。

他にもケースはありますが、詳しくお話しするのは多すぎます。

それを理解するのに長い時間がかかりました。

ちなみに、routerLinkActive="active"が必要です。私はそれをテストするためだけにそれを取り除きました、そしてそれはうまくいきませんでした。それで私はそれを元に戻しました、そしてそれからそれはうまくいきました。

于 2019-08-10T11:08:56.863 に答える
0

これは古いことは知っていますが、アクティブリンクの色を変更する際に問題が発生し、テスト中にサイトをローカルでホストしていたため、一部のパスが同じではなく、対応するリンクが異なることに気づきました。実際にアクティブです。

于 2021-03-27T15:00:42.693 に答える