如何在所选菜单项中设置样式. [英] how to set styles in selected menu item.

问题描述

我将此代码放在母版页中，以显示所有这些页中的菜单.

I putted this code in master page to display menus in all this pages.

<ul>
           <li><a id="lnkHome" href="Default.aspx">Home</a> </li>
           <li><a id="lnkAboutUs" href="AboutUs.aspx">About Us</a> </li>
           <li><a id="lnkDisclaimer" href="Disclaimer.aspx">Disclaimer</a> </li>
           <li><a id="lnkServices" href="Services.aspx">Services</a> </li>
           <li><a id="lnkContactUs" href="ContactUs.aspx">Contact Us</a> </li>
</ul>

并使用css设置此菜单的样式，例如ul li，a:hover，a:visited…….
现在，我如何才能添加差异外观，尤其是< a>链接(如果该页面当前正在访问).例如.如果我单击关于我们< a>链接，然后导航到AboutUs.aspx页，然后我要在该链接中设置背景图片，而background:其他链接中没有.

And used css to style this menus like ul li,a:hover, a:visited……
Now how I can add difference appearance in particular <a> link if that page is currently visiting. E.g. If I click the About Us <a> link then it navigate to AboutUs.aspx page and then I want to set background image in that link and background:none in other links.

推荐答案

"a:active"，但我没有尝试过:p.
在Google中搜索时，我发现了一条帖子- CSS，菜单:活动不起作用 [ ^ ]，其中指出"a:active"不起作用，但是有一个可接受的答案.

您会看到，给出答案的人在"a:active"不起作用的情况下，在答案下方再次评论.
因此，请遵循他的建议.
希望对您有所帮助.

You can do it by "a:active", but I have not tried :p.
When I was searching in google, I found one post - CSS, menu:active not working[^], where it is stated that "a:active" is not working, but it has an accepted answer.

You can see, the person who has given the answer commented again below the answer about how to achieve it if "a:active" is not working.
So, follow his suggestions.
Hope it helps.

使用ID.这是一个示例.

在aspx文件中

Use the id. Here is a sample.

in aspx file

<div id="menuInside">
	<ul id="nav-mini">
		<li><asp:linkbutton id="LinkButton1" runat="server"></asp:linkbutton></li>
		<li><asp:linkbutton id="LinkButton2" runat="server"></asp:linkbutton></li>
		<li><asp:linkbutton id="LinkButton3" runat="server"></asp:linkbutton></li>
		<li><asp:linkbutton id="LinkButton4" runat="server"></asp:linkbutton></li>
		</ul>
</div>

在css文件中.

in css file.

#menuInside a#LinkButton1{
...
}
#menuInside a#LinkButton1:hover{
...
}

#menuInside a#LinkButton2{
...
}
#menuInside a#LinkButton2:hover{
...
}

希望对您有所帮助.

hope this helps.

您可以尝试这样

you can try like this

<ul>
           <li><a class="liselected" id="lnkHome" href="Default.aspx">Home</a> </li>
           <li><a id="lnkAboutUs" href="AboutUs.aspx">About Us</a> </li>
           <li><a id="lnkDisclaimer" href="Disclaimer.aspx">Disclaimer</a> </li>
           <li><a id="lnkServices" href="Services.aspx">Services</a> </li>
           <li><a id="lnkContactUs" href="ContactUs.aspx">Contact Us</a> </li>
</ul

>


.liselected
{
背景颜色:#333;
.......
.......
}

>


.liselected
{
background-color:#333;
.......
.......
}

这篇关于如何在所选菜单项中设置样式.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！