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

html-css017

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

一般当前高亮都是后台程序判断实现的，不是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}

sublime text 2不需要装插件就可以使css3代码高亮显示的。

设置方法如下：

依次点击“查看”——“语法”——“css”即可设置css代码高亮显示了。如下图：