0

PHP、HTML、および CSS を使用して Web サイトに取り組んでいます。現在、ナビゲーション バーで、背景色を灰色に設定しています。ユーザーがナビゲーション バーにカーソルを合わせると、各リンクの背景が青色になりますが、リンクをクリックすると背景色が灰色に戻ります。その特定のリンクがアクティブな場合、ホバーの色を青色のままにするにはどうすればよいですか。

これは私のナビゲーション バーのコードです。

<tr>
<td width="800" height="54">
<div id="nav" >
<ax><b><font face="Arial" ><a style="text-decoration: none; color:#303030" href="index.php" >HOME</a></font></b></ax>
<bx><b><font face="arial" ><a style="text-decoration: none; color:#303030" href="edituser.php?own=y">IT</a></font></b></bx>
<cx><b><font face="arial" ><a style="text-decoration: none; color:#303030" href="newsevents.php">HUMAN RESOURCE</a></font></b></cx>
<dx><b><font face="arial" ><a style="text-decoration: none; color:#303030" href="industries.php">PROCUREMENT</a></font></b></dx>
<ex><b><font face="arial" size="1"><a style="text-decoration: none; color:#303030" href="http://www.csmphilippines.com/aboutus.html">FINANCE</a></font></b></ex>
<fx><b><font face="arial" ><a style="text-decoration: none; color:#303030" href="hact.php">HACT</a></font></b></fx>
</div>
</td>

これは私のCSSのコードです

#nav {
text-decoration:none;
padding-bottom:10px;
border-bottom:none;
width:
}

#nav ax {
display:inline;
padding:15px;
padding-left:31px;
padding-right:28px;
background-color:#ececec;
text-decoration:none;
}

#nav bx {
display:inline;
padding:15px;
padding-left:45px;
padding-right:45px;
background-color:#ececec;
text-decoration:none;
}

#nav cx {
display:inline;
padding:15px;
padding-left:45px;
padding-right:45px;
background-color:#ececec;
text-decoration:none;
}

#nav dx {
display:inline;
padding:15px;
padding-left:45px;
padding-right:45px;
background-color:#ececec;
text-decoration:none;
}

#nav ex {
display:inline;
padding:15px;
padding-left:53px;
padding-right:53px;
background-color:#ececec;
text-decoration:none;
}

#nav fx {
display:inline;
padding:15px;
padding-left:30px;
padding-right:30px;
background-color:#ececec;
text-decoration:none;
}

#nav ax:hover {
background-image:url(images/tabbackit.jpg); 
background-repeat:repeat-x;
height:900px;
}


#nav bx:hover {
background-image:url(images/tabbackit.jpg); 
background-repeat:repeat-x;
height:900px;
}
#nav cx:hover {
background-image:url(images/tabback.jpg); 
background-repeat:repeat-x;
height:900px;
}

#nav dx:hover {
background-image:url(images/tabbackproc.jpg); 
background-repeat:repeat-x;
height:900px;
}
#nav ex:hover {
background-image:url(images/tabbackfin.jpg); 
background-repeat:repeat-x;
height:900px;
}

#nav fx:hover {
background-image:url(images/tabbackhact.jpg); 
background-repeat:repeat-x;
height:900px;
}
4

3 に答える 3

0

簡単です。次のコードを入力するだけです。たとえば、ホームページで、次のコードをHEADに入力します。

<style type="text/css">
    #nav ax{
        background-image:url(images/tabbackit.jpg); 
        background-repeat:repeat-x;
    }
</style>
于 2012-05-01T07:39:55.883 に答える
0

簡単にできることは、すべてのページに同じスタイルシートを使用し、異なる CSS クラスを使用して各ページの対応するリンクを強調表示することです。たとえば、index.php では、この.activeクラスを使用してホーム リンクを強調表示します。

あなたは新しいので（あなたが言ったように）、それを分解しましょう：

すべてのページに同じ CSS を使用します。ただし、navbar 要素に対して 2 つの CSS クラスを定義します。1 つは.regular状態、もう1 つは.active状態です。すべてのページで、そのページに対応するリンクにアクティブなクラスを与え、他のリンクは通常のクラスのままにします。

しかし、それでは、リンクのままにしておきますか?

于 2012-05-01T07:22:13.570 に答える
0

これを行う方法は、body タグで各ページに独自の ID を与えることです。

<body id="pgAbout">

次に、メニュー項目ごとに個別の ID を設定します。

<li id="mnuAbout">

CSS を使用すると、現在表示しているページのリンクのスタイルを設定できます。

#pgAbout #mnuAbout,
#pgOther #mnuOther
{
   /* Styles here */
}

ここに簡単なデモがあります

アップデート

独自の HTML を使用して、その動作を少し明確にする別のデモを次に示します。

于 2012-05-01T07:13:30.827 に答える