css导航条判断当前页面高亮效果显示
CSS代码：.menu{width:990px;height:40px;float:left;}.menuul{list-style:none;margin:0px;pa...
CSS代码：
.menu{width:990px;height:40px;float: left;}
.menu ul{list-style: none;margin: 0px;padding: 5px;}
.menu ul li{width:90px;float:left;margin:0 10px;display:block;font-family: "微软雅黑";font-size: 16px;color: #FFF;line-height: 20px;text-align: center;}
.menu ul li a:link,.menu ul li a:visited {font-weight:bold;color:#fff;text-decoration:none;}
.menu ul li a:hover{font-weight:bold;color:#fff;text-decoration:underline;}
.menu ul li a:current{ color:#fc9d00;}
网页代码：
<div class="menu"><ul><li><A href="index.asp">首 页</a></li><li><A href="1.asp">公司介绍</a></li><li><A href="2.asp">公司新闻</a></li><li><A href="3.asp">招聘信息</a></li><li><A href="4.asp">联系我们</a></li><li><A href="5.asp">关于我们</A></li></ul></div>
如何实现当我打开index.asp是首页文字显示为：#fc9d00颜色，同理，其它导航也一样。
求修改的代码谢谢 展开
.menu{width:990px;height:40px;float: left;}
.menu ul{list-style: none;margin: 0px;padding: 5px;}
.menu ul li{width:90px;float:left;margin:0 10px;display:block;font-family: "微软雅黑";font-size: 16px;color: #FFF;line-height: 20px;text-align: center;}
.menu ul li a:link,.menu ul li a:visited {font-weight:bold;color:#fff;text-decoration:none;}
.menu ul li a:hover{font-weight:bold;color:#fff;text-decoration:underline;}
.menu ul li a:current{ color:#fc9d00;}
网页代码：
<div class="menu"><ul><li><A href="index.asp">首 页</a></li><li><A href="1.asp">公司介绍</a></li><li><A href="2.asp">公司新闻</a></li><li><A href="3.asp">招聘信息</a></li><li><A href="4.asp">联系我们</a></li><li><A href="5.asp">关于我们</A></li></ul></div>
如何实现当我打开index.asp是首页文字显示为：#fc9d00颜色，同理，其它导航也一样。
求修改的代码谢谢 展开
展开全部
一般当前高亮都是后台程序判断实现的，不是css做的，要用css做也行，只是麻烦点，要给每个栏目的<body>加上ID，这样做造成的麻烦是弄后台程序的时候不能把<body>这行直接写入页头包含文件之中：
下面代码每个body都有自己的ID来识别当前是什么栏目，导航栏每个li也加了class：
------------首页html------------
<body id="home">
<div class="menu">
<ul>
<li class="home"><a>首页</a></li>
<li class="about"><a>介绍</a></li>
<li class="news"><a>新闻</a></li>
<li class="job"><a>招聘</a></li>
</ul>
</div>
</body>
------------介绍页html------------
<body id="about">
...
</body>
------------新闻页html------------
<body id="news">
...
</body>
===============
Css code：
===============
/*导航按钮的默认样式*/
.menu li a{color:#000;}
/*当前栏目高亮样式*/
#home .menu .home a ,
#about .menu .about a ,
#news .menu .news a ,
#job .menu .job a{color:red;}
下面代码每个body都有自己的ID来识别当前是什么栏目，导航栏每个li也加了class：
------------首页html------------
<body id="home">
<div class="menu">
<ul>
<li class="home"><a>首页</a></li>
<li class="about"><a>介绍</a></li>
<li class="news"><a>新闻</a></li>
<li class="job"><a>招聘</a></li>
</ul>
</div>
</body>
------------介绍页html------------
<body id="about">
...
</body>
------------新闻页html------------
<body id="news">
...
</body>
===============
Css code：
===============
/*导航按钮的默认样式*/
.menu li a{color:#000;}
/*当前栏目高亮样式*/
#home .menu .home a ,
#about .menu .about a ,
#news .menu .news a ,
#job .menu .job a{color:red;}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<?php
$current = !empty($_GET['cur']) ? $_GET['cur'] : 'home';
?>
<div class="menu">
<ul>
<li><A <?php if($current=='home')echo 'class="current"'; ?> href="index.asp?cur=home">首 页</a></li>
<li><A <?php if($current=='jieshao')echo 'class="current"'; ?> href="1.asp?cur=jieshao">公司介绍</a></li>
<li><A <?php if($current=='new')echo 'class="current"'; ?> href="2.asp?cur=new">公司新闻</a></li>
<li><A <?php if($current=='zhaopin')echo 'class="current"'; ?> href="3.asp?cur=zhaopin">招聘信息</a></li>
<li><A <?php if($current=='lianxi')echo 'class="current"'; ?> href="4.asp?cur=lianxi">联系我们</a></li>
<li><A <?php if($current=='about')echo 'class="current"'; ?> href="5.asp?cur=about">关于我们</A></li>
</ul>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给当前栏目一个类，并在CSS里覆盖
网页代码：
<div class="menu"><ul><li><A href="index.asp" class=“now”>首 页</a></li><li><A href="1.asp">公司介绍</a></li><li><A href="2.asp">公司新闻</a></li><li><A href="3.asp">招聘信息</a></li><li><A href="4.asp">联系我们</a></li><li><A href="5.asp">关于我们</A></li></ul></div>
.menu ul li .now{ color:#fc9d00;}
导航加类名一般在后端代码加判断
网页代码：
<div class="menu"><ul><li><A href="index.asp" class=“now”>首 页</a></li><li><A href="1.asp">公司介绍</a></li><li><A href="2.asp">公司新闻</a></li><li><A href="3.asp">招聘信息</a></li><li><A href="4.asp">联系我们</a></li><li><A href="5.asp">关于我们</A></li></ul></div>
.menu ul li .now{ color:#fc9d00;}
导航加类名一般在后端代码加判断
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<li<% if(id="1"){ class="active"} %>><a>首页</a></li>
<li<% if(id="2"){ class="active"} %>><a>介绍</a></li>
<li<% if(id="3"){ class="active"} %>><a>新闻</a></li>
<li<% if(id="4"){ class="active"} %>><a>招聘</a></li>
用id来识别是哪个栏目..
我不知道asp是不是这样写，这种逻辑是对的
css修改成
.menu ul li.active a{color:#fc9d00;}
搞定 成功
<li<% if(id="2"){ class="active"} %>><a>介绍</a></li>
<li<% if(id="3"){ class="active"} %>><a>新闻</a></li>
<li<% if(id="4"){ class="active"} %>><a>招聘</a></li>
用id来识别是哪个栏目..
我不知道asp是不是这样写，这种逻辑是对的
css修改成
.menu ul li.active a{color:#fc9d00;}
搞定 成功
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
