css导航条判断当前页面高亮效果显示

2025-12-06 02:48:38

推荐回答（4个）

回答1：

一般当前高亮都是后台程序判断实现的，不是css做的，要用css做也行，只是麻烦点，要给每个栏目的加上ID，这样做造成的麻烦是弄后台程序的时候不能把这行直接写入页头包含文件之中：

下面代码每个body都有自己的ID来识别当前是什么栏目，导航栏每个li也加了class：

------------首页html------------

------------介绍页html------------

...

------------新闻页html------------

...

===============
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;}

回答2：

    $current = !empty($_GET['cur']) ? $_GET['cur'] : 'home';
?>

   
       href="index.asp?cur=home">首　　页

       href="1.asp?cur=jieshao">公司介绍

       href="2.asp?cur=new">公司新闻

       href="3.asp?cur=zhaopin">招聘信息

       href="4.asp?cur=lianxi">联系我们

       href="5.asp?cur=about">关于我们

回答3：

给当前栏目一个类，并在CSS里覆盖

网页代码：

.menu ul li .now{ color:#fc9d00;}

导航加类名一般在后端代码加判断

回答4：

>首页
>介绍
>新闻
>招聘

用id来识别是哪个栏目..
我不知道asp是不是这样写，这种逻辑是对的
css修改成
.menu ul li.active a{color:#fc9d00;}

搞定成功