100分求这样的导航条
导航条效果是:http://www.tudou.com/programs/
新点一个,以前的恢复;
经过其他的链接时,以前的还是原来的样子;
当然鼠标经过变成另一种样子(这个好弄点).
请高手帮忙.先谢了
[解决办法]
看不到,给你一个看看:
<html>
<style>
a{color:black;}
</style>
<script language= "JavaScript ">
var currenta = null;
function clicka(a)
{
if (currenta != null)
{
currenta.style.color = "black ";
}
currenta = a;
a.style.color = "red ";
}
</script>
<body>
| <a href= "# " onclick= "clicka(this) "> 新闻 </a> | <a href= "# " onclick= "clicka(this) "> 健康 </a> | <a href= "# " onclick= "clicka(this) "> 人才 </a> | <a href= "# " onclick= "clicka(this) "> 管理 </a> |
</body>
</html>
[解决办法]
<html>
<style>
body{
font-size:12px;
}
#menu {
padding:20px 20px 0 0;
}
#menu ul {
float:right;
list-style:none;
margin:0px;
}
#menu ul li {
float:left;
display:block;
line-height:30px;
margin:0 10px;
}
#menu ul li a:link,#menu ul li a:visited {
font-weight:bold;
color:#666
}
#menu ul li a:hover{}
.menuDiv {
width:1px;
height:28px;
background:#999
}
</style>
<script language= "JavaScript ">
var selectedMenu = null;
function onMouseOverColor(obj){
if(selectedMenu == obj) return;
obj.style.backgroundColor = "#e2e2e2 ";
}
function onClickColor(obj){
if(selectedMenu!=null || selectedMenu!=undefined){
selectedMenu.style.backgroundColor = " ";
}
selectedMenu = obj;
obj.style.backgroundColor = "#20a0c0 ";
}
function onBlurColor(obj){
if(selectedMenu == obj) return;
obj.style.backgroundColor = " ";
}
</script>
<body>
<div id= "menu ">
<ul>
<li onmouseover= 'onMouseOverColor(this) ' onclick= 'onClickColor(this) ' onmouseout= 'onBlurColor(this) '> <a href= "# "> 首页 </a> </li>
<li class= "menuDiv "> </li>
<li onmouseover= 'onMouseOverColor(this) ' onclick= 'onClickColor(this) ' onmouseout= 'onBlurColor(this) '> <a href= "# "> 博客 </a> </li>
<li class= "menuDiv "> </li>
<li onmouseover= 'onMouseOverColor(this) ' onclick= 'onClickColor(this) ' onmouseout= 'onBlurColor(this) '> <a href= "# "> 设计 </a> </li>
<li class= "menuDiv "> </li>
<li onmouseover= 'onMouseOverColor(this) ' onclick= 'onClickColor(this) ' onmouseout= 'onBlurColor(this) '> <a href= "# "> 相册 </a> </li>
<li class= "menuDiv "> </li>
<li onmouseover= 'onMouseOverColor(this) ' onclick= 'onClickColor(this) ' onmouseout= 'onBlurColor(this) '> <a href= "# "> 论坛 </a> </li>
<li class= "menuDiv "> </li>
<li onmouseover= 'onMouseOverColor(this) ' onclick= 'onClickColor(this) ' onmouseout= 'onBlurColor(this) '> <a href= "# "> 关于 </a> </li>
</ul>
</div>
</body>
</html>
是不是这样的?
[解决办法]
<div class= "nav_primary ">
<a href= "/my/program/publish.php " class= "nav_primaryUpload "> 上传节目 </a>
<ul>
<li> <a href= "/index.php "> 首 页 </a> </li>
<li> <a href= "/programs/ "> 节 目 </a> </li>
<li> <a href= "/playlist/list.do "> 豆 单 </a> </li>
<li> <a href= "/channels/ "> 频 道 </a> </li>
<li class= "nav_primaryCurrent "> <a href= "/community/ "> 播 客 </a> </li>
<li> <a href= "/fans/ "> 豆 友 </a> </li>
<li> <a href= "/together/ "> 一 起 </a> </li>
<li> <a href= "/groups/ "> 小 组 </a> </li>
<li class= "nav_end "> <a href= "http://bbs.tudou.com/ "> 论 坛 </a> </li>
</ul>
</div>
你看一下他的源代码，很简单的道理，不牵扯JS问题。
就是在当前分类的 <li> 里加个class= "nav_primaryCurrent "。CGI实现的
[解决办法]
<html>
<style>
body{
font-size:12px;
}
#menu {
padding:20px 20px 0 0;
}
#menu ul {
float:right;
list-style:none;
margin:0px;
}
#menu ul li {
float:left;
display:block;
line-height:30px;
margin:0 10px;
background-image:url(d:/1.gif);
}
#menu ul li a:link,#menu ul li a:visited {
font-weight:bold;
color:#666
}
#menu ul li a:hover{}
.menuDiv {
width:1px;
height:28px;
background:#999
}
</style>
<script language= "JavaScript ">
var selectedMenu = null;
function onMouseOverColor(obj){
if(selectedMenu == obj) return;
obj.style.backgroundImage = "url(d:/2.gif) ";
}
function onClickColor(obj){
if(selectedMenu!=null || selectedMenu!=undefined){
selectedMenu.style.backgroundImage = "url(d:/1.gif) ";
}
selectedMenu = obj;
obj.style.backgroundImage = "url(d:/3.gif) ";
}
function onBlurColor(obj){
if(selectedMenu == obj) return;
obj.style.backgroundImage = "url(d:/1.gif) ";
}
</script>
<body>
<div id= "menu ">
<ul>
<li onmouseover= 'onMouseOverColor(this) ' onclick= 'onClickColor(this) ' onmouseout= 'onBlurColor(this) '> <a href= "# "> 首页 </a> </li>
<li class= "menuDiv "> </li>
<li onmouseover= 'onMouseOverColor(this) ' onclick= 'onClickColor(this) ' onmouseout= 'onBlurColor(this) '> <a href= "# "> 博客 </a> </li>
<li class= "menuDiv "> </li>
<li onmouseover= 'onMouseOverColor(this) ' onclick= 'onClickColor(this) ' onmouseout= 'onBlurColor(this) '> <a href= "# "> 设计 </a> </li>
<li class= "menuDiv "> </li>
<li onmouseover= 'onMouseOverColor(this) ' onclick= 'onClickColor(this) ' onmouseout= 'onBlurColor(this) '> <a href= "# "> 相册 </a> </li>
<li class= "menuDiv "> </li>
<li onmouseover= 'onMouseOverColor(this) ' onclick= 'onClickColor(this) ' onmouseout= 'onBlurColor(this) '> <a href= "# "> 论坛 </a> </li>
<li class= "menuDiv "> </li>
<li onmouseover= 'onMouseOverColor(this) ' onclick= 'onClickColor(this) ' onmouseout= 'onBlurColor(this) '> <a href= "# "> 关于 </a> </li>
</ul>
</div>
</body>
</html>