请问这种菜单效果是怎样做的

Question

请问这种菜单效果是怎样做的，效果如图：主要是刷新后红色不变，我看了一下代码，主要是JS动态，这个没有搞明白，请高手帮助为谢！

Answer 1

放个隐藏域如（<input type="hidden" id="txt1" value="<%=request.getparameter("txt1")%>"），再css的时候根据request.getparameter("txt1")的值选择不同的css就行。这事比较容易理解的方法。也很浅。

Answer 2

感谢楼上的朋友，但是网页是静态的页面，只是用了css+div和JS做，所以问题还在待解中，有请好心人帮忙！

Answer 3

这几个都是不同的页面 直接写不同的CSS就可以了

Answer 4

JS代码如下：<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}function MM_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}
//-->
</script>
菜单代码：<ul>
  <!-- InstanceBeginEditable name="nav" --><li ><a href="index.html" target="_top" onclick="MM_nbGroup('down','group1','nav01','images/nav_01_a.gif',1);MM_nbGroup('down','group1','nav01','images/nav_01_a.gif',1);MM_nbGroup('down','group1','nav01','images/nav_01_a.gif',1);MM_nbGroup('down','group1','nav01','images/nav_01_a.gif',0);MM_nbGroup('down','group1','nav01','images/nav_01_a.gif',1)" onmouseover="MM_nbGroup('over','nav01','images/nav_01_over.gif','images/nav_01_a.gif',1)" onmouseout="MM_nbGroup('out')"><img src="images/nav_01.gif" name="nav01" border="0" onload="" /></a></li>
<li><a href="about.html" target="_top" onclick="MM_nbGroup('down','group1','nav02','images/nav_02_a.gif',1);MM_nbGroup('down','group1','nav02','images/nav_02_a.gif',1);MM_nbGroup('down','group1','nav02','images/nav_02_a.gif',1);MM_nbGroup('down','group1','nav02','images/nav_02_a.gif',0);MM_nbGroup('down','group1','nav02','images/nav_02_a.gif',0);MM_nbGroup('down','group1','nav02','images/nav_02_a.gif',1);MM_nbGroup('down','group1','nav02','images/nav_02_a.gif',0)" onmouseover="MM_nbGroup('over','nav02','images/nav_02_over.gif','images/nav_02_a.gif',0)" onmouseout="MM_nbGroup('out')"><img src="images/nav_02_a.gif" name="nav02" border="0" onload="MM_nbGroup('init','group1','nav02','images/nav_02.gif',0)" /></a></li>
<li><a href="services.html" target="_top" onclick="MM_nbGroup('down','group1','nav03','images/nav_03_a.gif',1);MM_nbGroup('down','group1','nav03','images/nav_03_a.gif',1)" onmouseover="MM_nbGroup('over','nav03','images/nav_03_over.gif','images/nav_03_a.gif',1)" onmouseout="MM_nbGroup('out')"><img src="images/nav_03.gif" name="nav03" border="0" /></a></li>
<li><a href="case_web.html" target="_top" onclick="MM_nbGroup('down','group1','nav04','images/nav_04_a.gif',1);MM_nbGroup('down','group1','nav04','images/nav_04_a.gif',1);MM_nbGroup('down','group1','nav04','images/nav_04_a.gif',0);MM_nbGroup('down','group1','nav04','images/nav_04_a.gif',1)" onmouseover="MM_nbGroup('over','nav04','images/nav_04_over.gif','images/nav_04_a.gif',1)" onmouseout="MM_nbGroup('out')"><img src="images/nav_04.gif" name="nav04" border="0" onload="" /></a></li>
<li><a href="custamer.html" target="_top" onclick="MM_nbGroup('down','group1','nav05','images/nav_05_a.gif',1)" onmouseover="MM_nbGroup('over','nav05','images/nav_05_over.gif','images/nav_05_a.gif',1)" onmouseout="MM_nbGroup('out')"><img src="images/nav_05.gif" name="nav05" border="0" /></a></li>
<li><a href="contact.html" target="_top" onclick="MM_nbGroup('down','group1','nav06','images/nav_06_a.gif',1);MM_nbGroup('down','group1','nav06','images/nav_06_a.gif',1)" onmouseover="MM_nbGroup('over','nav06','images/nav_06_over.gif','images/nav_06_a.gif',1)" onmouseout="MM_nbGroup('out')"><img src="images/nav_06.gif" name="nav06" border="0" /></a></li>
  <!-- InstanceEndEditable -->
</ul>

Answer 5

onload="MM_nbGroup('init','group1','nav02','images/nav_02.gif',0)"
这个是怎样动态加载的

Answer 6

mm开头的代码一般是dm生成的 
这里刷新不变为什么呢 点击的时候域名改变了  
http://www.samaracn.com/about.html
http://www.samaracn.com/services.htmlcss是单独得  所以其实很傻比的 效果  是几个页面一个相同的模板

Answer 7

这种东西CSS就可以搞定了啊，都不用上JS这么麻烦。大概说个思路吧
比如index.html的最外层容器应用了样式.home，而about.html的外层容器应用样式.about
菜单“首页”应用样式.frontpage，菜单“关于我们”应用样式.aboutus
那么可以定义
.frontpage {
.../*不被选中时的样式写这里*/
}
.aboutus {
.../*同上*/
}
.home .frontpage {
.../*被选中时的样式写这里*/
}
.about .aboutus {
.../*同上*/
}
看出玄机了吗？正常情况下.frontpage会被应用，所以是未选中状态。在index.html中因为外层容器被应用了.home，所以菜单满足了.home .frontpage这个更详细的规则，所以此规则被应用，覆盖了.frontpage，因此显示成被选中状态。

Answer 8

<style type="text/css">
<!--
.home {
background-image: url(images/phot.jpg);
}
.home .frontpage {
color: #0000FF;
}
-->
</style><div  class="home">
<div class="frontpage">
首页
</div>
</div>是这样嘛
但是没有效果，一打开页面就全显出来了

Answer 9

跟据需求请作修改，将首页命名为index.html，用服务器测试则会看到“首页”被选中，命名为about.html而会看到“关于我们”被选中，依此类推<!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=utf-8" />
<title>test</title>
<style> 
.menu{ width:800px; }
.menu ul{margin:0;padding:0;list-style:none;}
.menu li{ float:left; font-size:13px; font-weight:bold; color:#000000;}
.menu li a,.menu li a:visited,.menu li a:active{ padding:10px; display:block;color:#000000; font-size:12px; font-weight:bold; text-decoration:none;}
.menu li a:hover,#cur{ color:#FFF; background:#F00; text-decoration:none;}
</style>
</head>
 
<body>
<div class="menu" id="menu">
        <ul>
          <li><a href="/index.html">首页</a></li>
          <li><a href="/about.html">关于我们</a></li>
          <li><a href="/services.html">服务项目</a></li>
          <li><a href="/case_web.html">政策法规</a></li>
          <li><a href="/custamer.html">药具信息</a></li>
          <li><a href="/contact.html">药具论坛</a></li>
        </ul>
</div>
<script type="text/javascript"> 
//此JS原理是获取地址栏的URL与菜单中的链接对比，如果相等则选中
var url="http://"+window.location.host+"/";
var local=window.location.href;
if(url==local)local=window.location.href+"index.html";//当只输入域名时后面加上index.html
var lefturl=document.getElementById("menu").getElementsByTagName("a");
for(i=0;i<lefturl.length;i++){
if(local.toLowerCase()==lefturl[i].href.toLowerCase()){//将大写的转为小写
lefturl[i].id="cur";
}
}
</script>
</body>
</html>