急，在线等，购物导航条，现有一级分类不能高亮，求大侠帮忙看看！

howardvictor 2012-11-05 05:33:47
急，在线等，购物导航条，现有一级分类不能高亮，求大侠帮忙看看！

玩转大学城下的-=》电脑办公 滑过不能高亮，感觉是js出的问题，帮帮忙！谢谢！！！


这是想要的效果，现在情况是鼠标滑过“电脑办公”后不能显绿色高亮，大侠给我看看哪里出问题了，比较争，在线等，谢谢！！！

附源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="gbk" />
<!--
作者：小爱大福
时间：2012年10月11号
-->
<title>页面001</title>
<style type="text/css">
body{behavior:url(images/iehoverfix.htc);}
</style>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/excanvas/excanvas.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>


<script>
var timer;
var timer_num=175;

function getElementByTagAndClass(tag,className){
var uls=document.getElementsByTagName(tag);
for(var i=0;i<uls.length;i++){
if(uls[i].className==className){
return uls[i];
}
}
}

function jcb_menu_mouseover(){
//alert("鼠标移进");
clearTimeout(timer);
var obj=getElementByTagAndClass("ul","nav_menu_ul02");
obj.style.display="block";
}

function jcb_menu_mouseout(){
//alert("鼠标移出");

timer = setTimeout(function() {
var obj=getElementByTagAndClass("ul","nav_menu_ul02");
obj.style.display="none";
}, timer_num);
}
window.onload=function(){
var objli=getElementByTagAndClass("li","nav_menu_show");
var obj=getElementByTagAndClass("ul","nav_menu_ul02");

//alert(obj.className);

if(window.addEventListener){ // Mozilla, Netscape, Firefox
objli.addEventListener('mouseover', function(){
//alert('Mozilla, Netscape, Firefox事件');

jcb_menu_mouseover();

}, false);

objli.addEventListener('mouseout', function(){
//alert('Mozilla, Netscape, Firefox事件');

jcb_menu_mouseout();

}, false);

} else { // IE
objli.attachEvent('onmouseover', function(){
//alert("IE事件");
jcb_menu_mouseover();

});

objli.attachEvent('onmouseout', function(){
//alert("IE事件");
jcb_menu_mouseout();

});

}
};

function menu_mouseover(obj){
var divs=obj.getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
if(divs[i].className=="nav_menu_list"){
divs[i].style.display="block";
}
}
}

function menu_mouseout(obj){
var divs=obj.getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
if(divs[i].className=="nav_menu_list"){
divs[i].style.display="none";
}
}
}
</script>
<style>
* {
margin: 0px;
padding: 0px;
}
.nav {
width:800px;
height:40px;
background:#83b812;

}
.nav_menu_show {
position: relative;
z-index:1;

}

.nav_menu_ul01 li {
float:left;
height:40px;
line-height:40px;
list-style-type:none;
}

.nav_menu_ul01 li.nav_firstli{

}
.nav_menu_ul01 li.nav_firstli a{
display:block;
padding:0 15px;
font-size:1.2em;
color:#fff;
letter-spacing:1px;
}
.nav_menu_ul01 li.nav_home a{
background:#f90;
text-decoration:none;
font-weight:bold;
}
.nav_menu_ul01 li.nav_firstli a:hover{
background:#f90;
text-decoration:none;
font-weight:bold;
}

.nav_menu_show .pruduct_all {
display:block;
width:190px;
text-align:center;
font-size:1.2em;
font-weight:bold;
letter-spacing:1px;
}
.nav_menu_ul02 {
border:5px solid #83b812;
border-top:none;
display:none;
position: absolute;
top:40px;
left:0px;
width:180px;
background:#F9FFDD;
z-index:2;
}
.nav_menu_ul02 li {
height: 40px;
line-height: 40px;
letter-spacing:1px;
font-size:14px;
width:180px;
}
.nav_menu_ul02 li .pruduct_fenlei1 a{
display:block;
padding: 0 0 0 25px;
width:155px;
background:#dedede;
}
.nav_menu_ul02 li .pruduct_fenlei1 a:hover {
display:block;
color:#fff;
background:#83b812;
}
.nav_menu_list {
margin-top:1px;
background:#F9FFDD;
border: 5px solid #83b812;
width:400px;
display:none;
position: absolute;
top:0px;
left:180px;
}
</style>

</head>
<body>
<div class="nav" >
<ul class="nav_menu_ul01" >
<li class="nav_menu_show"> <span class="pruduct_all">玩转大学城</span>
<ul class="nav_menu_ul02">
<li onMouseOver="menu_mouseover(this)" onMouseOut="menu_mouseout(this)"><span class="pruduct_fenlei1"><a href="#" >电脑办公</a></span>
<div class="nav_menu_list"> 电脑办公电脑办公电脑办公 </div>
</li>
<li onMouseOver="menu_mouseover(this)" onMouseOut="menu_mouseout(this)"><span class="pruduct_fenlei1"><a href="#" >电脑办公</a></span>
<div class="nav_menu_list"> 家用电器家用电器家用电器 </div>
</li>
<li onMouseOver="menu_mouseover(this)" onMouseOut="menu_mouseout(this)"><span class="pruduct_fenlei1"><a href="#" >电脑办公</a></span>
<div class="nav_menu_list"> 电脑办公电脑办公电脑办公 </div>
</li>
<li onMouseOver="menu_mouseover(this)" onMouseOut="menu_mouseout(this)"><span class="pruduct_fenlei1"><a href="#" >电脑办公</a></span>
<div class="nav_menu_list"> 家用电器家用电器家用电器 </div>
</li>
</ul>
</li>
<li class="nav_firstli nav_home"><a href="" title="" target="_blank">大学城首页</a></li>
<li class="nav_firstli"><a href="#">店铺动态</a></li>
<li class="nav_firstli"><a href="#">店铺动态</a></li>
<li class="nav_firstli"><a href="#">店铺动态</a></li>
</ul>
</div>
</body>
</html>
...全文
134 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
flycantus 2012-11-06
  • 打赏
  • 举报
 回复
比如你可以这样（只是举个例子，你可以参考）： 


<!DOCTYPE html>
<html>
<head>
<meta charset="gbk" />
<!--
作者：小爱大福
时间：2012年10月11号
 -->
<title>页面001</title>
<style type="text/css">
body{behavior:url(images/iehoverfix.htc);}
</style>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>


<script>
var timer;
var timer_num=175;

function getElementByTagAndClass(tag,className){
var uls=document.getElementsByTagName(tag);
for(var i=0;i<uls.length;i++){
if(uls[i].className==className){
return uls[i];
}
}
}

function jcb_menu_mouseover(){
//alert("鼠标移进");
clearTimeout(timer);
var obj=getElementByTagAndClass("ul","nav_menu_ul02");
obj.style.display="block";
}

function jcb_menu_mouseout(){
//alert("鼠标移出");

timer = setTimeout(function() {
var obj=getElementByTagAndClass("ul","nav_menu_ul02");
obj.style.display="none";
}, timer_num);
}
window.onload=function(){
var objli=getElementByTagAndClass("li","nav_menu_show");
var obj=getElementByTagAndClass("ul","nav_menu_ul02");

//alert(obj.className);

if(window.addEventListener){ // Mozilla, Netscape, Firefox
        objli.addEventListener('mouseover', function(){
//alert('Mozilla, Netscape, Firefox事件');

jcb_menu_mouseover();

}, false);

objli.addEventListener('mouseout', function(){
//alert('Mozilla, Netscape, Firefox事件');

jcb_menu_mouseout();

}, false);

    } else { // IE
        objli.attachEvent('onmouseover',  function(){
//alert("IE事件");
jcb_menu_mouseover();

});

objli.attachEvent('onmouseout',  function(){
//alert("IE事件");
jcb_menu_mouseout();

});

    }
};

function menu_mouseover(obj){
    var divs = obj.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++)
    {
if(divs[i].className=="nav_menu_list"){
divs[i].style.display="block";
}
}
var links = obj.getElementsByTagName("a");
links[0].style.background = "#83b812";
links[0].style.color = "#fff";
}

function menu_mouseout(obj){
var divs=obj.getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
if(divs[i].className=="nav_menu_list"){
divs[i].style.display="none";
}
}
var links = obj.getElementsByTagName("a");
links[0].style.background = "#dedede";
links[0].style.color = "#00f";
}

function test_mouseover(obj)
{
    var parent_obj = obj.parentElement;
    var links = parent_obj.getElementsByTagName("a");
    links[0].style.background = "#83b812";
    links[0].style.color = "#fff";
}
function test_mouseout(obj)
{
    var parent_obj = obj.parentElement;
    var links = parent_obj.getElementsByTagName("a");
    links[0].style.background = "#dedede";
    links[0].style.color = "#00f";
}
</script>
<style>
* {
margin: 0px;
padding: 0px;
}
.nav {
width:800px;
height:40px;
background:#83b812;

}
.nav_menu_show {
position: relative;
z-index:1;

}

.nav_menu_ul01 li {
float:left;
height:40px;
line-height:40px;
list-style-type:none;
}

.nav_menu_ul01 li.nav_firstli{

}
.nav_menu_ul01 li.nav_firstli a{
display:block;
padding:0 15px;
font-size:1.2em;
color:#fff;
letter-spacing:1px;
}
.nav_menu_ul01 li.nav_home a{
background:#f90;
text-decoration:none;
font-weight:bold;
}
.nav_menu_ul01 li.nav_firstli a:hover{
background:#f90;
text-decoration:none;
font-weight:bold;
}

.nav_menu_show .pruduct_all {
display:block;
width:190px;
text-align:center;
font-size:1.2em;
font-weight:bold;
letter-spacing:1px;
}
.nav_menu_ul02 {
border:5px solid #83b812;
border-top:none;
display:none;
position: absolute;
top:40px;
left:0px;
width:180px;
background:#F9FFDD;
z-index:2;
}
.nav_menu_ul02 li {
height: 40px;
line-height: 40px;
letter-spacing:1px;
font-size:14px; 
width:180px;
}
 .nav_menu_ul02 li .pruduct_fenlei1 a{
display:block;
padding: 0 0 0 25px;
width:155px; 
background:#dedede;
}
 .nav_menu_ul02 li .pruduct_fenlei1 a:hover  {
display:block;
color:#fff;
background:#83b812;
} 
.nav_menu_list {
margin-top:1px;
background:#F9FFDD;
border: 5px solid #83b812;
width:400px;
display:none;
position: absolute;
top:0px;
left:180px;
}
</style>

</head>
<body>
  <div class="nav" >
    <ul class="nav_menu_ul01" >
      <li class="nav_menu_show"> <span class="pruduct_all">玩转大学城</span>
        <ul class="nav_menu_ul02">
          <li onMouseOver="menu_mouseover(this)" onMouseOut="menu_mouseout(this)"><span class="pruduct_fenlei1"><a href="#" >电脑办公</a></span>
            <div class="nav_menu_list"  onMouseOver="test_mouseover(this)" onMouseOut="test_mouseout(this)"> 电脑办公电脑办公电脑办公ss </div>
          </li>
          <li onMouseOver="menu_mouseover(this)" onMouseOut="menu_mouseout(this)"><span class="pruduct_fenlei1"><a href="#" >电脑办公</a></span>
            <div class="nav_menu_list"  onMouseOver="test_mouseover(this)" onMouseOut="test_mouseout(this)"> 家用电器家用电器家用电器bb </div>
          </li>
          <li onMouseOver="menu_mouseover(this)" onMouseOut="menu_mouseout(this)"><span class="pruduct_fenlei1"><a href="#" >电脑办公</a></span>
            <div class="nav_menu_list"  onMouseOver="test_mouseover(this)" onMouseOut="test_mouseout(this)"> 电脑办公电脑办公电脑办公 </div>
          </li>
          <li onMouseOver="menu_mouseover(this)" onMouseOut="menu_mouseout(this)"><span class="pruduct_fenlei1"><a href="#" >电脑办公</a></span>
            <div class="nav_menu_list"  onMouseOver="test_mouseover(this)" onMouseOut="test_mouseout(this)"> 家用电器家用电器家用电器 </div>
          </li>
        </ul>
      </li>
      <li class="nav_firstli nav_home"><a href="" title="" target="_blank">大学城首页</a></li>
      <li class="nav_firstli"><a href="#">店铺动态</a></li>
  <li class="nav_firstli"><a href="#">店铺动态</a></li>
  <li class="nav_firstli"><a href="#">店铺动态</a></li>
    </ul>
  </div>
</body>
</html>
flycantus 2012-11-06
  • 打赏
  • 举报
 回复
明白你的意思了，你的高亮是用样式控制的而不是js，所以不是js的问题，你可以考虑用js让它保持高亮。
howardvictor 2012-11-05
  • 打赏
  • 举报
 回复
电脑办公向横方向显子目录后就不能保留绿色高亮显示了
howardvictor 2012-11-05
  • 打赏
  • 举报
 回复
向右就是一滑过，绿色高亮不显了
flycantus 2012-11-05
  • 打赏
  • 举报
 回复
鼠标滑出菜单后就消失了啊，如何保持高亮？没明白需求
flycantus 2012-11-05
  • 打赏
  • 举报
 回复
滑过后保持高亮？
howardvictor 2012-11-05
  • 打赏
  • 举报
 回复
猾过后就不能停在高亮状态上，要求的是这效果
flycantus 2012-11-05
  • 打赏
  • 举报
 回复
噢，不好意思，报错是因为没有js/excanvas/excanvas.js，刚才没仔细看。
flycantus 2012-11-05
  • 打赏
  • 举报
 回复
在ie8,ff,chrome中试过你的代码，可以高亮显示，另外你的代码中提示有js错误
当程序崩溃的时候怎么办 part-1 Iven 本文由 大侠自来也
当程序崩溃的时候怎么办 part-1 Iven    2012-04-15 14:23    16条评论  543 人围观   分享到：-- 当程序崩溃的时候怎么办 本文由   大侠自来也   翻译（泰然翻译组），转载请注明出处并通知泰然。 有这样一种情形：当我们正在快乐的致力于我们的app时，并且什么看都是无比顺利，但是突然，坑爹啊
我在CSDN参与的3000个帖子
 今日偶然翻到，感慨万千 1：申述：版主，是否扣了我的专家分？ 2：100分急求，随机输出十个小写字母，但是，要求这十个字母不相同 3：求Sn=a+aa+aaa+…+aaa…a（n个a）之值 4：数组题 望高手帮忙！ 5：呵呵，来推荐一下我的网站，本站提供大量当今流行的免费的音乐和免费电影，常用软件、游戏、精美图库下载,希望对网友有帮助!顺便散分! 6：VBA请教怎
discuz_result
命名 discuz_result 3856604,答题注册插件用不了,3140844 3852724,最新版墨镜风格模板发布了，有需要的朋友可以进来看看,2759280 3856589,官方手机模板在哪安装,3140684 3856347,手机触摸屏被劫持跳转其它网站,3112842 3856562,终于知道DZ官网为什么没落了,3112900 3856535,主题自带的二级导航怎么修改啊,2578089 3856505,以前有农场这些插件能安装，现在没了吗？,1515035 3856513,请问这个网站
5.20爬虫结——Mu
3852724,最新版墨镜风格模板发布了，有需要的朋友可以进来看看,2759280 3856589,官方手机模板在哪安装,3140684 3856347,手机触摸屏被劫持跳转其它网站,3112842 3856562,终于知道DZ官网为什么没落了,3112900 3856535,主题自带的二级导航怎么修改啊,2578089 3856505,以前有农场这些插件能安装，现在没了吗？,1515035 3856513,请问这个网站用的是什么应用程序,3140310 3856515,萌新想问一下，能否可以实现现在主流素
当程序崩溃的时候怎么办 part-1
当程序崩溃的时候怎么办 part-1 A-A+ Iven2012 年 4 月 15 日26条评论2688 次浏览iOS 本文由   大侠自来也   翻译（泰然翻译组），转载请注明出处并通知泰然。 有这样一种情形：当我们正在快乐的致力于我们的app时，并且什么看都是无比顺利，但是突然，坑爹啊，它崩溃了。（悲伤地音乐响起） 我们需要做的第一件事就是：不要惊慌。 修复崩溃
CSS

61,115

社区成员

60,728

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章