Question

在滑动导航中，css如何设置鼠标点击其中一个跳到该页面后，该选项颜色为滑动停止项

如图所示，红色默认是在首页上，我希望当我点击其他跳到该页后，红色能停留在该位置上，请问如何实现。。附上css代码：
#fancymenu {
position: relative;
height: 30px;
width: 960px;
background: url('../images/bg.gif') no-repeat top;
padding: 3px;
margin: 10px 0;
overflow: hidden;
al
}

#pictureselect {
position: relative;
height: 1%; /* ie bug */
}

#fancymenu ul, #pictureselect {
padding: 0;
margin: 0;
}

/* Don't apply padding here (offsetWidth will differ in IE)
If you need padding add it to the child anchor */
#fancymenu ul li, #pictureselect li {
float: left;
list-style: none;
}

#fancymenu ul li a, #pictureselect li a {
text-indent: -500em;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
}

#pictureselect li {
height: 54px;
}

#pictureselect li a {
height: 54px;
width: 62px;
}

#menu_home a, a:visited{
width: 80px;
background: url('../images/menu_home.png') no-repeat center !important;
background: url('../images/menu_home.gif') no-repeat center;
}
menu_home a:link,#menu_home a:visited{
/*background:url('../images/bg_menu.gif')no-repeat center;*/
color:#777;
}
#menu_company a {
width: 119px;
background: url('../images/menu_company.png') no-repeat center !important;
background: url('../images/menu_company.gif') no-repeat center;
}

#menu_custormer a {
width: 119px;
background: url('../images/menu_custormer.png') no-repeat center !important;
background: url('../images/menu_travel.gif') no-repeat center;
}

#menu_show a {
width: 142px;
background: url('../images/menu_show.png') no-repeat center !important;
background: url('../images/menu_show.gif') no-repeat center;
}
#menu_contactus a{
width:120px;
background:url('../images/menu_contactus.png') no-repeat center !important;
background:url('../images/menu_contactus.gif') no-repeat center;
}
#menu_joinus a{
width:119px;
background:url('../images/menu_joinus.png') no-repeat center !important;
background:url('../images/menu_joinus.gif') no-repeat center;
}
#menu_mess a{
width:119px;
background:url('../images/menu_mess.png') no-repeat center !important;
background:url('../images/menu_mess.gif') no-repeat center;
}

#fancymenu li.background {
/*background: url('../images/bg_menu_right.png') no-repeat top right !important;*/
background: url('../images/bg_menu_right.gif') no-repeat top right;
z-index: 8;
position: absolute;
visibility: hidden;
}

#fancymenu .background .left {
/*background: url('../images/bg_menu.png') no-repeat top left !important;*/
background: url('../images/bg_menu.gif') no-repeat top left;
height: 30px;
margin-right: 9px; /* 7px is the width of the rounded shape */
}

Answer 1

这个不是CSS能设定的。你要在不同的页面里分别设置导航条。或者你可以用一个函数来生成导航条，根据调用页面的不同，生成样式不同的导航条。

举个例子：例如php函数：
function getNav($page){
//储存你的导航栏信息
$nav_s = array("首页","公司简介","产品展示","客户案例","诚聘英才");
$nav_d = array("index.php","about.php","products.php","demo.php","xxx.php");
//通过循环输出导航
$html = '<ul>';
for(var $i=0;$i<count($nav_s);$i++){
if($page==$i){
$html .= '<li><span class="这里是选中的CSS类名">' . $nav_s[$i] . '</span></li>';
}else{
$html .= '<li><a href="'. $nav_d[$i] .'" class="这里是普通的CSS类名">' . $nav_s[$i] . '</a></li>';
}
$html .= '</ul>';
return $html;
}
}
然后在不同的页面里调用，

比如在index.php里应写为
$nav_html = getNav(0);
echo $nav_html;
在公司简介页面about.php里应写为
$nav_html = getNav(1);
echo $nav_html;
类推。。

追问

我这个是自带一个js的。里面好像控制了一个点击后的效果，你帮我看看好吗。我JS不太熟练。
我发表到我空间文章那了。。http://hi.baidu.com/qq50001/blog/item/2b4d540573e126197aec2cfa.html

追答

看了下JS代码，你的导航菜单是由nav...格式构成的。其中当前页面激活的导航菜单的li标签应该带一个css类 .current ，所以，你在每个页面的导航菜单里，把当前菜单的li标签添加一个 .current 类（）。

先试试看吧，你贴的代码不全。

追问

你好，我按照你的说话做了。不过我的网站的每个页面都是统一引用一个头部文件的，就不能在每个页面都有自己的导航菜单里面添加了。。

追答

那就在那个头部文件里根据页面来输出导航菜单的HTML语句吧。用函数生成，或者条件判断。

追问

能否给个例子..参考.. 万分感激

Answer 2

首先，想知道你的具体意思是什么。

我的猜测是，你想实现这种效果：“首页”有红色背景，但是点击“产品展示”后跳转到产品展示页后，红色背景在“产品展示”上？
如果是这样的话，只要在首页的页面给“首页”这个链接设置红色背景，在产品展示页给“产品展示”这个链接设置红色背景即可