css导航
我在做个导栏航，菜单如：菜单1 菜单2 菜单3（都是图片）当打开首页面时，菜单1被选中，其它菜单未被选中
当点击菜单2时，来到菜单2的页面，这时菜单2显示为已选中图片，菜单3或菜单1时为回原图
于此类推
问题出现在这里
怎样使得当我打开首页时，菜单1永远处于选中状态，其它菜单未被选中 --------------------编程问答-------------------- 选中和未选中是否为同一张图片呢？如果不是则在打开首页的时候加载被选中后的图片 ，当点击其他菜单的时候加载未被选中的图片 --------------------编程问答-------------------- 页面初始化时,载入选中的代码.
--------------------编程问答-------------------- 希望高手能给详细的代码……谢谢
--------------------编程问答--------------------
function setLeftMenu(s,div)--------------------编程问答-------------------- 是两张图片 --------------------编程问答-------------------- 听起来.和tab基本是一样的.你可以找一下这方面的css和js --------------------编程问答-------------------- onclick等重修改菜单样式即可
{
var a=D$(div).getElementsByTagName("li");
for(var i=0;i<a.length;i++)
{
var reg=new RegExp("</?(a|A)[^>]*>","gi");
if(Ks(a[i].innerHTML.replace(reg,""))==s)
{
a[i].className="LeftNavliSel";
}
else
{
a[i].className="";
}
}
}
修改背景图片
--------------------编程问答-------------------- 就像51job上面的那种导航 --------------------编程问答-------------------- 像这样的效果网上很多的 随便搜搜就有一大堆 不过貌似用jquery写简单一点 可以减少代码量！ --------------------编程问答-------------------- 样式:
body{font-size:12px;font-family:Arial,Helvetica,'宋体',sans-serif;color:#333;background:#fff;margin:0;}
a:link{color:#0041D9;text-decoration:none;outline:none;}
a:visited{color:#0041D9;text-decoration:none;outline:none;}
a:hover{color:#f60;text-decoration:underline;outline:none;}
a:active{color:#0041D9;text-decoration:none;outline:none;}
#header{position:relative;width:100%;}
div.bar{position:relative;height:42px;background:url(mainmenu.bg14_6x42.gif) repeat-x;}
#header div.tabbar{width:900px;}
#header .tabbar div.tabs{left:266px;position:absolute;top:41px;font-size:14px;font-weight:bold;}
#header .tabbar .tabs a{float:left;width:80px;height:24px;line-height:24px;padding-top:7px;text-align:center;color:#000;font-weight:lighter;font-size:14px;background:transparent;}
#header .tabbar .tabs a:hover{background:#fff url(nav_hover_80x31.gif) no-repeat;text-decoration:none;margin-left:-1px;padding-left:1px;}
#header .tabbar .tabs a.actived{background:#fff url(nav_80x31.gif) no-repeat;font-weight:bold;color:#fff;margin-left:-1px;padding-left:1px;}
#header .tabbar .tabs a.actived:hover{background:#fff url(nav_80x31.gif) no-repeat;font-weight:bold;color:#fff;text-decoration:underline;}
#header .tabbar .bg{position:absolute;left:266px;top:41px;width:560px;height:31px;z-index:-1;}
#header .tabbar .bg .nw{float:left;width:80px;height:31px;background:transparent url(navleft2_80x31.gif) no-repeat;}
#header .tabbar .bg .cen{float:left;width:80px;height:31px;background:transparent url(navlcenter_80x31.gif) no-repeat;}
#header .tabbar .bg .ne{float:left;width:80px;height:31px;background:transparent url(navright_80x31.gif) no-repeat;}
#header .tabbar .float_icon{background:transparent url(new01_18x19.gif) no-repeat;font-size:0;height:19px;line-height:0;position:absolute;right:403px;text-indent:-999px;top:-4px;width:18px;}
#header{z-index:20;min-width:970px;}
#header div.banner{position:relative;height:72px;z-index:10;}
div.bar{height:7px;background:url(mainmenu.bg11_6x7.gif) repeat-x;}
代码:
<!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/html; charset=gb2312" />
<title>绿色水平一级CSS菜单 - www.865171.cn</title>
<link rel="stylesheet" rev="stylesheet" href="home.css" type="text/css"></link>
</head>
<body>
<div id="header">
<div class="banner">
<div class="tabbar">
<div class="tabs">
<div class="float_icon">新</div>
<a href="http://www.865171.cn/" title="首 页" class="actived" style="margin-left:0;padding-left:0;">首 页</a>
<a href="http://www.865171.cn/css-templates/" title="CSS模板">CSS模板</a>
<a href="http://www.865171.cn/admin-templates/" title="后台模板">后台模板</a>
<a href="http://www.865171.cn/icons/" title="图片图标">图片图标</a>
<a href="http://www.865171.cn/css-code/" title="CSS代码">CSS代码</a>
<a href="http://www.865171.cn/css-menu/" title="CSS菜单">CSS菜单</a>
<a href="http://www.865171.cn/css-chart/" title="CSS图表">CSS图表</a>
</div>
<div class="bg">
<div class="nw"></div>
<div class="cen"></div>
<div class="cen"></div>
<div class="cen"></div>
<div class="cen"></div>
<div class="cen"></div>
<div class="ne"></div>
</div>
</div>
</div>
<div class="bar"></div>
</div>
</body>
</html>
补充：.NET技术 , ASP.NET
