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