翻遍Google，试遍Jquery，找个可以让二级下拉菜单高亮的方法太难了！

在Google上翻到了30多页，找寻一种可以让二级下拉菜单背景高亮的方法，试遍了其中看到的几乎所有CSS或Jquery的二级下拉菜单导航条，就没有一款能够自动根据当前链接，高亮所在栏目背景的方法。期间虽在本坛看到一篇“不用Cookie的仿刷新二级高亮菜单”的高文，无奈显示方式不同，想照猫画虎模仿修改，又因脑袋木讷欠缺技术，只能作罢。说到这里，各位高手不要笑啊，像我这样的大多数菜鸟都很笨，但却都很执着，通常都只有围观高手切磋的份儿，就怕耽误高手时间，如果不是确实没有办法了，不会发帖求解。不知哪位技术大仙通此雕虫小技，又恰巧有闲，还望能够不吝指教，略叙一二，让我等菜鸟能够解困！

具体一些，比如这个dropdown_one下拉菜单（预览效果），如果只需用到二级菜单，如何在选定首页之外的父栏目或子栏目后，能让其当前父栏目的背景高亮显示呢？菜鸟诚心请教，还望高手教诲！！！

作者: cclko 发布时间: 2010-05-17

用JS判断浏览器地址再高亮菜单的链接，同域名的地址应该很容易，跨域的貌似就不行了。
简单的方法是用css实现，即每个页都设置css高亮当前页即可，淘宝貌似就是那么做的。我认为这也是目前主流的做法。

作者: KOEN301 发布时间: 2010-05-17

KOEN301仁兄，你说的我大概懂一点点，但是具体该如何操作呢，我用的是GAE上的MICOLOG博客，想为“分类”做个横向导航，恰巧最近这个博客程序又支持多级目录分类了，便想搞个下拉菜单来将所有父分类和子分类一并囊括其中，用的是最笨的方法，就是一个个手动添加链接，可到如何让当前分类背景高亮这里就卡住了，不知该如何应付，光是试验各种Jquery导航都不下50个了，怎是一个惨字了得啊。。。。

作者: cclko 发布时间: 2010-05-17

既然是一个个手动添加链接，那干脆手动把每个页面的css小改一下不就行了？当然如果是在同一页做锚点高亮不同的标签可能就不行了。。

作者: KOEN301 发布时间: 2010-05-17

<!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>无标题文档</title> <style> *{ margin:0; padding:0;} ul li { float: left; display: inline; font: 0.9em Arial, Helvetica, sans-serif; height: 30px; width: 100px; list-style: none; } ul li a { color: #FFF; text-decoration: none; line-height: 29px; width: 91px; margin: 0px; padding: 0px 0px 0px 8px; display: block; border-right: solid 1px #ccc; border-bottom:solid 1px #ccc; background: #808080; } ul li ul li { height:25px; } ul li ul li a { background: #666; line-height:24px; } ul li a:hover { background: #666; } ul li ul { visibility: hidden; } ul li:hover ul { visibility: visible;} ul li ul li a:hover { background: #333; } </style> </head> <body> <ul> <li><a href="#">菜单一</a></li> <li><a href="#">菜单二</a> <ul> <li><a href="#">子菜单一</a></li> <li><a href="#">子菜单二</a></li> <li><a href="#">子菜单三</a></li> </ul> </li> <li><a href="#">菜单三</a></li> <li><a href="#">菜单四</a> <ul> <li><a href="#">子菜单一</a></li> <li><a href="#">子菜单二</a></li> <li><a href="#">子菜单三</a></li> </ul> </li> <li><a href="#">菜单五</a></li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

纯CSS 可以继续添加多级

作者: shelan 发布时间: 2010-05-18

谢谢shelan，可是我不需要二级下拉菜单的CSS代码，要的只是高亮效果，您这个是无效的，点击首页外的其他栏目链接后，页面就刷新了，自然也就无法使当前父栏目的背景高亮。

作者: cclko 发布时间: 2010-05-18

KOEN301，链接虽然是手动加上去的，但调用的页面是生成的，这该如何修改CSS，这是用在Google GAE上的一个Micolog博客程序上的，建立的分类都是由程序生成的伪HTML，应该是这么叫吧，总之以我的水平无法找到改动CSS的地方，也不太清楚您讲的修改CSS该如何操作，我这最多会用别人做好的Jquery插件，或是修改一下页面的CSS样式，其他就“迷茫”了。。。。

作者: cclko 发布时间: 2010-05-18

//if(window.location.href.indexOf(alink.href)!=-1){alink.style.color="yellow";}

作者: istatus 发布时间: 2010-05-19

多谢各位设计高手的指教，你们就是蓝坛的精华所在，可是在下委实菜的厉害，实在不知这代码该如何插入调用。其实我就是上星期看到GAE的Micolog博客程序很有意思，便利用空闲时间搭建一个，并根据网上各路大仙的指导，在主题上略作了点皮毛上的修改，现在进行到分类目录这里卡住了，这么高级的应用不是我能玩得转的了。呵呵，所以如有精通此道者，还望能够给个“菜”点的解决方案。

Micolog博客地址： http://sitesfan.appspot.com/ 就是那个弹出式下拉菜单，将子分类目录的链接手动加进去后，点击某个子分类，能让最上层的父分类链接背景高亮吗？

这个和PHP的Wordpress蛮像，但内在还是相差很多的，所以可以Google到的东西也不多，搞不定就当学习了。

作者: cclko 发布时间: 2010-05-19

谢谢，收藏了。

作者: long8752100 发布时间: 2010-05-27

嗯，我哪篇文章可能不适应于你这种场境。
在你这种博客系统中，其实人家在代码中已经给出了当前菜单高亮的钩子，只需要写一下样式就可以实行高亮记录当前菜单项。看代码有一个 class="current"没有（这个类应该会随着程序动态添加的），就用这个就可以了：
#menu li.current a:link,#menu li.current a:visited,#menu li.current a:hover{background:url(图片地址) no-repeat left top;}这句话就高亮了，没有细看CSS代码，原理就是这样。

[ 本帖最后由 by0001 于 2010-5-27 22:28 编辑 ]

作者: by0001 发布时间: 2010-05-27

by0001大侠，这个博客程序确实在PAGE页面上，可以通过内建的代码来高亮当前PAGE页，但在CATE分类目录页面上，却没有内建代码来高亮显示当前分类目录页面的所在菜单。由于是PYTON语言的程序，所以又不能参考WORDPRESS的相关设置和代码，来自己添加分类目录页面的高亮菜单代码，这样只能靠最菜的办法手动一个个添加上去，但这样程序又无法判断当前页，自然也就无法进行分类目录的菜单高亮显示了。

还有一个问题，这个页面的搜索栏部分，我在CHROME和SAFARI浏览器下查看，发现“搜索”按钮是错位的，其实在FF和IE6、IE7下这个按钮也有一点显示差别，但却不会像CHROME和SAFARI这样严重错位到了底部，调试了半天CSS，各种参数试过后均不能解决，只能认为是兼容性问题了-_-！

作者: cclko 发布时间: 2010-06-03

CSS的东西真的很费神

作者: cielkong 发布时间: 2010-06-04

呵呵，其实这东西自己研究下就知道了。

作者: wakeme 发布时间: 2010-06-04

呵呵，搞了几小时，所有兼容性问题都解决了，至少IE6 7 8,FF,谷歌和safiri都没错误了，但现在想想要实现这个二级下拉菜单点亮当前页，还真是有点难，尤其是在这个较少见的博客程序上，更是难上加难，所以就不抱太大希望了，太耗费精力，对菜鸟尤甚。

作者: cclko 发布时间: 2010-06-04

我同样被这个问题所困扰。

作者: yadan 发布时间: 2010-06-06

哈哈，看来还有同样有此需要的兄弟啊，不过这个涉及的东西似乎太复杂了，同时要应用此效果的大侠又比较少，所以还是静等高手来解决吧！

作者: cclko 发布时间: 2010-06-07

两种方法：
1. 动态写入css (需要显示高亮的页面) 比如
<li class="cur">foo</li>
<li>foo</li>
其中 class="cur" 表示需要高亮的是通过服务器端代码控制输出的比如php asp.. 纯静态的无法做到
2.js变量或者Cookie 这个纯静态页面是可以做到的
比如 var hilightNum=2;
然后通过js设置第二个的className为cur即高亮，可以用getElementsByTagName或者Jquery就更方便了
附实例：

<!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>无标题文档</title> <style type="text/css"> body{ font-size:12px} a{ font-size:12px; text-decoration:none; color:#000000; display:block; float:left; width:100px; height:24px; line-height:24px} a:hover,.cur a{ background-color:#000000; color:#FFFFFF} ul{ margin:0px; padding:0px; list-style:none} li{ float:left; width:100px; height:24px; line-height:24px; background-color:#999999; margin-left:10px; text-align:center} #setting{ clear:both; font-size:12px; line-height:36px} .clear{ clear:both; width:0px; height:10px; overflow:hidden} </style> </head> <body> 实例1（过动态输出控制默认）. <ul id="menu1"> <li><a href="#">菜单1</a></li> <li><a href="#">菜单2</a></li>  <li class="cur"><a href="#">菜单3</a></li> <li><a href="#">菜单4</a></li> <li><a href="#">菜单5</a></li> <li><a href="#">菜单6</a></li> <li><a href="#">菜单7</a></li> </ul> <div class="clear"></div> 实例2（JS载入时设置）. <ul id="menu2"> <li><a href="#">菜单1</a></li> <li><a href="#">菜单2</a></li> <li><a href="#">菜单3</a></li> <li><a href="#">菜单4</a></li> <li><a href="#">菜单5</a></li> <li><a href="#">菜单6</a></li> <li><a href="#">菜单7</a></li> </ul> <div class="clear"></div> 实例3（手动设置）. <ul id="menu3"> <li><a href="#">菜单1</a></li> <li><a href="#">菜单2</a></li> <li><a href="#">菜单3</a></li> <li><a href="#">菜单4</a></li> <li><a href="#">菜单5</a></li> <li><a href="#">菜单6</a></li> <li><a href="#">菜单7</a></li> </ul> <div class="clear"></div> <div id="setting">设置高亮菜单 <input name="textfield" type="text" size="5" id="num" value="3" /> <input type="button" name="Submit" value="确定" onclick="set()"/> </div> <script language="javascript"> var cur=1;//默认第二个高亮需要设置高亮的页面修改此处数字即可 var menus=document.getElementById("menu2").getElementsByTagName("li"); menus[cur-1].className="cur"; function set(){ var n=parseInt(document.getElementById("num").value); var menus=document.getElementById("menu3").getElementsByTagName("li"); if(n<=menus.length){ for(var i=1;i<=menus.length;i++){ if(i==n){ menus[i-1].className="cur"; }else{ menus[i-1].className=""; } } } } </script> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 hsb008 于 2010-6-7 15:18 编辑 ]

作者: hsb008 发布时间: 2010-06-07

hsb008，一看您就是个高手，哈哈，问题是在下却是一个不折不扣的菜鸟，实在没有能力写出这个Jqury，呵呵，我坐等高手，哈哈，很无耻的坐等！

作者: cclko 发布时间: 2010-06-07

晕，刚才没注意，怎么这一会，就有代码出来了，赶紧看看高手的代码范例，呵呵，真的万分感谢！！！！

作者: cclko 发布时间: 2010-06-07

hsb008 ,
-_-! 花了三个多小时，反复研究并试着将您的JS代码套入之前给出的二级下拉菜单中，均以失败告终，怎么看都觉得这是单栏菜单的高亮方法，似乎改不了二级下拉菜单啊。当然，主要是我菜，没能理解您代码的使用，呵呵，再次感谢一下！

另外，顺便在这里咨询一下，为什么在http://sitesfan.appspot.com/  测试留言功能时，发现在使用“xheditor”提交时，如果应用了“加粗字体”、“斜体”等标签后，第一次提交便会显示“请您键入留言内容，只有再次点击”提交“后，才会将留言提交出去。而在提交留言后，它并不会立即显示出留言内容，只有在重新键入其它留言内容，并再次使用 “xheditor”提交后，前一个留言才会显示出来。

还有就是，在使用“xheditor”提交留言时，只有“加粗字体”、“斜体”、“下划线”、“图片”及“表情”，这五个标签起作用，其它标签在编辑状态可用并能即时显示出效果，只是提交后却没有任何效果。

此 Blog采用comment.js进行Ajax方式的留言提交，其中包含了一个”jqury.color.js“，在利用“xheditor”提交留言时，IE下会显示该插件无效，删除此js后问题仍没有解决。

针对以上问题，我对“xheditor”进行了自定义标签和采用您给出的例子进行测试，问题没有解决。之后，我又多次改变“xheditor”的调用方式，问题仍然没有解决。如果正巧哪位高手又有闲暇时间了，能帮我指出问题所在吗，不胜感谢！下面是提交的相关代码：

首先是调用xheditor

<script type="text/javascript" src="/themes/5styles/xheditor/xheditor-zh-cn.min.js"></script>
<script type="text/javascript">
function xheditorInit(on)
{
if(on){
$('#comment').xheditor({tools:'Blocktag,Fontface,FontSize,FontColor,BackColor,Separator,Bold,Italic,Underline,Strikethrough,Removeformat,BtnBr,Align,List,Outdent,Indent,Separator,Emot,Link,Unlink,Separator,Img,Table',width:'100%',hoverExecDelay:-1,layerShadow:0,upMultiple:false,forcePtag:false,emots:{qq:{name:'QQ',count:55,width:25,height:25,line:11}}});

}else{
      $('#comment').xheditor(false);
}
}
</script>

这是AJAX提交用的COMMENT.JS

http://sitesfan.appspot.com/themes/5styles/comment.js

这是 textarea 的代码

<div><textarea name="comment" id="comment" rows="10" cols="10" tabindex="5"></textarea></div>
            <p>
                  <input type="hidden" name="key" value="{{entry.key}}" />
                  <input type="hidden" name="useajax" value="1" />
                  <input type="submit"  name="submit" id="submit" value="" class="comment-button" onClick="login();" tabindex="6" />

作者: cclko 发布时间: 2010-06-07

刚才写了一堆，没提交上 - -！
重来一次

说下我的解决办法吧
通过为BODY加个ID 同时预定义样式来进行菜单的改变
为BODY加ID也有多种途径
1.一般分类URL 格式都是固定下来的比如 http://分类名.url.com 或者http://www.url.com/分类名这样就可以按照具体实现通过正则来取出来设置body 的 ID
2.通过锚点（#号后面那玩意）然后设置body 的 ID
3.直接手动设置

一个简单的例子如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn"> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <style type="text/css"> /* <![CDATA[ */ ul {list-style-type:none; overflow:hidden; zoom:1;} li {float:left; padding:5px 20px; margin-right:10px; background:#ccc; color:#fff;} body#b1 .list1, body#b2 .list2, body#b3 .list3, body#b4 .list4, body#b5 .list5, body#b6 .list6 { background:#333; } /* ]]> */ </style> </head> <body id="b1"> <ul> <li class="list1">11</li> <li class="list2">22</li> <li class="list3">33</li> <li class="list4">44</li> <li class="list5">55</li> <li class="list6">66</li> </ul> <p> <select id="sel"> <option value="b1" selected="selected">b1</option> <option value="b2">b2</option> <option value="b3">b3</option> <option value="b4">b4</option> <option value="b5">b5</option> <option value="b6">b6</option> </select> </p> <script type="text/javascript"> /* <![CDATA[ */ var sel = document.getElementById("sel") sel.onchange = function () { document.body.id = sel.value; } /* ]]> */ </script> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 MarVell 于 2010-6-7 21:54 编辑 ]

作者: MarVell 发布时间: 2010-06-07