如何使链接在CSS中保持活动状态


How to make a link stay active in CSS?

基本上,当你在该网站上时,我希望链接的悬停外观保持活动状态。我希望我解释得对。当你访问特定页面时,链接后面应该有一个背景。

以下是html:的代码

<div class="menudiv">
<div id="menu">
    <ul id="menu">
      <li><a href="?p=start"><span>Hem</span></a></li>
      <li><a href="?p=omoss"><span>Om oss</span></a></li>
      <li><a href="?p=tjanster"><span>Tjänster</span></a></li>
      <li><a href="?p=referenser"><span>Referenser</span></a></li>
      <li><a href="?p=kontakt"><span> Kontakt</span></a></li>
    </ul>
  <div class="clr"></div>
  </div>
  </div>

这是css:

#menu { float:right; padding:23px 0 0 0; margin:0; width:420px; height:35px;}
#menu ul { text-align:right; padding:0; margin:0; list-style:none; border:0; height:35px;}
#menu ul li { float:left; margin:0; padding:0 5px; border:0; height:35px;}
#menu ul li a { float:left; margin:0; padding:10px 0; color:#5c8783; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
#menu ul li a span { padding:10px 13px; background:none;}
#menu ul li a:hover { background:url(images/r_menu.gif) right no-repeat;}
#menu ul li a:hover span { background:url(images/l_menu.gif) left no-repeat;}
#menu ul li a:active { background:url(images/r_menu.gif) right no-repeat;}
#menu ul li a:active span{ background:url(images/l_menu.gif) left no-repeat;}

为该链接添加一个CSS类(例如<a class="CurrentPage">),然后将选择器应用于该类(例如,#menu ul li a:active, a.CurrentPage

据我所知,悬停属性应该放在CSS的最后一个(在活动和其他属性下面),以便正常工作。

您给出的id相同:

  <div id="menu">
     <ul id="menu">

哪个是错误的

你应该让id与众不同。

您基本上需要的是在菜单中的a标记中添加一个css类。示例:

<li><a href="?p=start" class="currentPage"><span>Hem</span></a></li>

根据您想要的菜单项的设计,为您的currenPage类添加样式

现在,您的页面应该是动态的,以便能够将currenPagecss类设置为用户当前正在查看的当前菜单项

示例:

<li><a href="?p=start" class="<?php if(/**check if the user is in this link/menu item**/) echo "currentPage"; ?>" ><span>Hem</span></a></li>