网页制作中如何实现鼠标单击改变导航栏元素背景颜色的效果？ 40
我现在做了一个导航栏，想实现的效果是：当用户点击导航栏的a元素后，a元素的背景颜色会改变，如果再点击另一个元素，另一个元素背景颜色会改变，同时a元素的背景颜色会变为原来那...
我现在做了一个导航栏，想实现的效果是：当用户点击导航栏的a元素后，a元素的背景颜色会改变，如果再点击另一个元素，另一个元素背景颜色会改变，同时a元素的背景颜色会变为原来那种颜色，说简单点，就是想通过导航栏元素的高亮显示让用户知道他现在在访问哪个板块，例如百度音乐的导航栏就是这样的：http://music.baidu.com
展开
3个回答
展开全部
方法一：js+url，方法二：php语言判断，单单html+css实现不了你要的效果
追问
你是说用js来判断url，然后根据不同的url来让不同的导航栏元素高亮显示？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
晨控智能
2025-02-10 广告
可视化标签是广州晨控智能技术有限公司在物联网及自动识别领域的一项重要技术创新。通过先进的图形化界面设计，我们将复杂的数据信息转化为直观、易读的标签形式。这些标签不仅美观大方，更能够实时展示物品状态、库存数量、位置信息等关键数据。用户只需一眼...
点击进入详情页
本回答由晨控智能提供
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#nav a{font-size:16px;color:#FFFFFF;text-decoration:none;background-color:#0033FF;display:block;width:120px;
text-align:center;border:2px solid;margin:0px;float:left;}
#nav a:hover{color:#FFFFFF;background-color:#0099FF;}
#nqq a{font-size:16px;color:#FFFFFF;text-decoration:none;background-color:#ee7621;display:block;width:120px;
text-align:center;border:2px solid;margin:0px;float:left;}
#nqq a:hover{color:#FFFFFF;background-color:#1e90ff;}
</style>
</head>
<body>
<div id="nav">
<a href="#">首页</a><a href="#">新闻资讯</a><a href="#">旅游线路</a>
<a href="#">西藏指南</a><a href="#">景点介绍</a><a href="#">旅蔵游记</a>
<a href="#">西藏地图</a><a href="#">进藏须知</a>
</div>
</body>
</html>
在style中设置属性即可！O(∩_∩)O，我做了一个例子，你可以参考下！
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#nav a{font-size:16px;color:#FFFFFF;text-decoration:none;background-color:#0033FF;display:block;width:120px;
text-align:center;border:2px solid;margin:0px;float:left;}
#nav a:hover{color:#FFFFFF;background-color:#0099FF;}
#nqq a{font-size:16px;color:#FFFFFF;text-decoration:none;background-color:#ee7621;display:block;width:120px;
text-align:center;border:2px solid;margin:0px;float:left;}
#nqq a:hover{color:#FFFFFF;background-color:#1e90ff;}
</style>
</head>
<body>
<div id="nav">
<a href="#">首页</a><a href="#">新闻资讯</a><a href="#">旅游线路</a>
<a href="#">西藏指南</a><a href="#">景点介绍</a><a href="#">旅蔵游记</a>
<a href="#">西藏地图</a><a href="#">进藏须知</a>
</div>
</body>
</html>
在style中设置属性即可！O(∩_∩)O，我做了一个例子，你可以参考下！
追问
额，看来你没理解我的问题，我要的改变颜色效果是在鼠标单击之后发生的，而且即使鼠标离开导航栏元素，颜色仍然不会还原，具体效果你可以到百度音乐页面那里看看
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
