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

html-css014

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}

<!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/htmlcharset=gb2312" />

<title>Free CSS Navigation Menu Designs 2 at exploding-boy.com</title>

<style type="text/css">

<!--

body {

margin:0

padding:0

font: bold 14px/1.5em Verdana

}

img {

border: none

}

/*- Menu Tabs 10--------------------------- */

#tabs10 {

float:left

width:100%

font-size:93%

border-bottom:1px solid #2763A5line-height:normal

}

#tabs10 ul {

margin:0

padding:10px 10px 0 50px

list-style:none

}

#tabs10 li {

display:inline

margin:0

padding:0

}

#tabs10 a {

float:left

background:url("http://bbs.blueidea.com/attachment.php?aid=142158&k=210b03fea66c7fb373e645375955f89e&t=1271318872&noupdate=yes&nothumb=yes") no-repeat left top

margin:0

padding:0 0 0 4px

text-decoration:none

}

#tabs10 a span {

float:left

display:block

background:url("http://bbs.blueidea.com/attachment.php?aid=142159&k=94fc9918c2d649d5968cf6238e24a62c&t=1271318872&noupdate=yes&nothumb=yes") no-repeat right top

padding:5px 15px 4px 6px

color:#FFF

}

/* Commented Backslash Hack hides rule from IE5-Mac \*/

#tabs10 a span {float:none}

/* End IE5-Mac hack */

#tabs9 a:hover span {

color:#FFF

}

#tabs10 a:hover {

background-position:0% -42px

}

#tabs10 a:hover span {

background-position:100% -42px

}

#tabs10 #current a {

background-position:0% -42px

}

#tabs10 #current a span {

background-position:100% -42px

}

-->

</style>

</head>

<body>

<div id="tabs10">

<ul>

<!-- CSS Tabs -->

<li><a href="Home.html"><span>主页地方</span></a></li>

<li><a href="Products.html"><span>产品</span></a></li>

<li><a href="Services.html"><span>服务</span></a></li>

<li id="current"><a href="Support.html"><span>支持</span></a></li>

<li><a href="Order.html"><span>订购</span></a></li>

<li><a href="About.html"><span>关于</span></a></li>

</ul>

</div>

</body>

</html>

var url=document.frame.src

switch(url)

{

case "src-1":

产品1.style.className='show'

break

case "":

.....

}