Question

我在菜单上有两个按钮，鼠标悬停在按钮上，将图像更改为另一个图像，但在鼠标输出时，它仍然回到原始图像，我想要做的是当我点击此按钮时，它应该是活动状态，以便一个可以知道他现在正在访问哪个页面。我的代码是

#menu
{width: 628px;
height: 69px;
padding-left: 380px;
}
#menu ul {  list-style: none;}

#menu li {  display: inline;}
#menu a {   float: left;
    width: 107px;
    height: 28px;
        display: block;
    }
#menu a:hover { width: 107px;
        height: 28px;
}
#emailUs
  { display: block;
    width: 107px;
    height: 28px;
    background: url("../images/add_1.png") no-repeat 0 0;
}
#emailUs:hover
  {
    background: url("../images/add_h.jpg") no-repeat 0 0;
  }

和html代码是

#menu
{
width: 628px;
height: 69px;
padding-left: 380px;

}

#menu ul {
    list-style: none;
}

#menu li {

    display: inline;
}

#menu a {
    float: left;
    width: 107px;
    height: 28px;
        display: block;


}

#menu a:hover {
    width: 107px;
        height: 28px;



}

#emailUs
  {
    display: block;
    width: 107px;
    height: 28px;
    background: url("../images/add_1.png") no-repeat 0 0;

  }

  #emailUs:hover
  {
    background: url("../images/add_h.jpg") no-repeat 0 0;
  }

注意：我的图像是分离的图像而不是精灵图像。

你可以看到我想要实现的演示（www.daniweb.com）

Answer 1

从程序中发送变量您所在的页面。并添加一个活动或非活动类和css类

例如：

<a href="home.php" class="selectedmenu">Home</a>
<a href="myaccount.php" class="">My Account</a>

现在为选定的课程菜单提供背景图像，以便只有主图像具有活动背景。如果您没有使用精灵，那么就这样做

<li id="home"><a href="home.php" class="selectedmenu">Home</a></li>
<li id="myaccount"><a href="myaccount.php" class="">My Account</a></li>

然后致电

#home .selectedmenu{
background-image:url('homeselected.png');
}

发送变量

<?php
$menuSelected ='home';
?>
<a href="home.php" class="<?php if ($menuSelected=='home')echo ('selectedmenu');?>">Home</a>

如何在CSS导航中创建活动状态

1 个答案: