100分求这样的导航条,该如何解决
日期：2014-05-16 浏览次数：20384 次
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) '
导航条效果是: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) '
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
