0

CSS を使用する基本的な HTML メニューを作成しました。簡単にするために、メニュー全体でクラス「nav」を使用しました。ただし、クラスを使用したため、アクティブなページのボタンを新しい色にする方法がわかりません。

基本的に、ページがアクティブなとき (ページ上のユーザー) は、画像以外のすべてが新しい色になります。

これは私のコードです:

    <!--nav-->
    <ul class="nav">
    <li class="nav"><a href="index.html" target="_self"><img class="nav" src="images/logo_sm.png" width="100" height="50" alt="Welcom to Comp Sale " /></a></li>
    <li class="nav"><a class="nav" href="index.html" target="_self">Home</a></li>
    <li class="nav"><a class="nav" href="Products.html" target="_self">Products</a>        </li>
    <li class="nav"><a class="nav" href="ShoppingCart.html" target="_self">Cart <img class="cart_t" src="images/cart.png" alt="cart.jpg"  /></a></li>
    </ul>
    <!--end nav-->

そしてCSS

/* nav */
ul.nav
{
    list-style:none;
    background-color:#999;
    border-top-right-radius:20px;
    border-top-left-radius:20px;
    width:1000px;
    height:70px;
    font-size:20px;
    margin:0px auto;
}
li.nav
{
    display:inline;
    margin:0px;
}
a.nav
{
    color:#000;
    background-color:#CCC;
    border-color:#999;
    border-style:outset;
    padding-left:45px;
    padding-right:45px;
    padding-top:10px;
    padding-bottom:10px;
    margin-left:10px;
    border-radius:15px;
    position:relative;
    bottom:20px;
    left:150px;
}
a.nav:hover
{
    background-color:#666;
    border-style:inset;
    color:#333;
    box-shadow: 0px 0px 20px #FFF;
    text-shadow:none;
}
img.nav
{

    border:none;
    margin-top:10px;
    position:relative;
    right:20px;
}
.cart_t
{
    border:none;
    position:relative;
    top:10px;
    left:15px;
}
ul li a:active
{
    background-color:#FF0000;
    font-size:33px;
}

/*end nav*/
4

1 に答える 1

0

こんにちは、あなたがしていることはどういうわけか間違っています。class="nav"リンクとリスト項目の両方に使用しているように。それはかなり間違っています。既に使用されているクラス名以外を使用する必要があります。次のようなものを使用します。

<li class="nav_li">
   <a class="nav_link" href="index.html" target="_self">
      <img class="nav_image" src="images/logo_sm.png" width="100" height="50" alt="Welcom to Comp Sale " />
   </a>
</li>

それらを区別するためだけに、この方法でスタイルを簡単に設定できます。

ただし、これも使用できますli.nav a.nav ul.nav img.nav。コードの主な点は、画像リンクのプロパティを指定していないことです。そのためにこれを試してください：

a.nav img {
/* all the properties for that! */
}

これにより、画像のプロパティを設定しようとします。background-color: #hexcodeまたはを使用できますcolor: #hexcode;。

それでも最善の方法は、異なるクラス名を使用することです。

そしてその

$(window).focus(function() { // jQuery

あなたのために仕事をします。この関数で CSS プロパティを設定します。

于 2013-09-09T02:50:29.283 に答える