| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 1256 人关注过本帖
标题:JS问题很急,请各位看下。
只看楼主 加入收藏
liweilkm
Rank: 1
等 级:新手上路
帖 子:9
专家分:0
注 册:2010-8-11
结帖率:100%
收藏
已结贴  问题点数:20 回复次数:15 
JS问题很急,请各位看下。
http://www.跟这个一样只是我只有第3个是有子菜单上面两个没有子菜单只是图片背景会变换,就是我想做到在刷新的情况下,我选择的一级导航不会跳回去。
比如:我选择了第二个一级导航“查询项目”; 我刷新页面后还是在“查询项目”,不会跳到“项目汇总”;总导航点击背景色会变得那种。
在线等了,高手急救!!!急急急。。。。由于后台不会做局部刷新。
图片附件: 游客没有浏览图片的权限,请 登录注册

程序代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">


 function showleftmenu(num){

    
    if(document.getElementById("help_center_leftmenu"+num).className=="active"){
        for(var i=0;i<3;i++){
            document.getElementById("help_center_leftmenu"+i).className="";
            document.getElementById("menu_content"+i).style.display="none";
        }
    }else{
        for(var i=0;i<3;i++){
            document.getElementById("help_center_leftmenu"+i).className="";
            document.getElementById("menu_content"+i).style.display="none";
        }
        document.getElementById("help_center_leftmenu"+num).className="active";
        document.getElementById("menu_content"+num).style.display="block";
    }
       

 }
   

 function showmenuitem(thisid){
     var items=document.getElementById("help_categories").getElementsByTagName("a");
    for(var i=0;i<items.length;i++){
        if(items[i].className=="style"){
            items[i].className="";
        }
    }
    thisid.className="style";

 }

</script>
<style type="text/css">
#help_categories {
    width:157px;
    height:468px;
    background:#eff0f2;
    margin:4px 0 0 4px;
}
.classification {
    width:157px;
    float:left;
    height:auto;
}
.set_up {
    width:157px;
    float:left;
    height:auto;
}
.set_up h3 {
    text-align:center;
    background:#330000;
    height:auto;
    line-height:30px;
    font-size:12px;
    font-weight:bold;
    cursor:pointer;
}
.set_up h3.active {
    background:#006600;
    height:auto;
    line-height:47px;
    color:#FFF;
}
.set_up h3 a, .set_up a {
    color:#000000;
    display:block;
}
.set_up ul li {
    width:150px;
    float:right;
    line-height:25px;
}
</style>
</head>

<body>
<div id="help_categories">
        <div class="classification">
         
          <div class="set_up">
            <h3 id="help_center_leftmenu1"><a href="#" onmousedown="showleftmenu(1)" target="_blank">项目浏览</a></h3>
            <ul id="menu_content1" style="display:none;">
            
            </ul>
          </div>
          <div class="set_up" style="margin-top:3px;">
            <h3 id="help_center_leftmenu2"><a href="#" onmousedown="showleftmenu(2)" target="_blank">查询项目</a></h3>
            <ul id="menu_content2" style="display:none;">
            
            </ul>
          </div>
          <div class="set_up" style="margin-top:3px;">
            <h3 id="help_center_leftmenu0" class="active"><a href="#" onmousedown="showleftmenu(0)">项目汇总</a></h3>
            <ul id="menu_content0">
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer" >·标志设计</a></li>
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer">·VI设计</a></li>
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer">·包装设计</a></li>
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer">·网站设计</a></li>
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer">·空间设计</a></li>
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer">·导示设计</a></li>
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer">·工业设计</a></li>
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer">·品牌顾问</a></li>
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer">·品牌命名</a></li>
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer">·广告设计</a></li>
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer">·传媒设计</a></li>
            </ul>
          </div>
        </div>
      </div>
</body>
</html>


[ 本帖最后由 liweilkm 于 2010-8-11 16:11 编辑 ]
搜索更多相关主题的帖子: 导航 项目 PUBLIC 子菜单 背景色 
2010-08-11 15:59
foktime
Rank: 11Rank: 11Rank: 11Rank: 11
来 自:奥斯维辛
等 级:贵宾
威 望:35
帖 子:795
专家分:2742
注 册:2009-9-4
收藏
得分:20 
用cookie保存状态
另外你的js部分写的太罗嗦了,给你改了一下
html部分也改了,没有说点击这种导航切换效果还要打开新页面的
程序代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function $(id) {
    return document.getElementById(id);
}
function showleftmenu(num){
    for (var i = 0; i < 3; i++) {
        $("help_center_leftmenu" + i).className = "";
        $("menu_content" + i).style.display = "none";
    }
    $("help_center_leftmenu" + num).className = "active";
    $("menu_content" + num).style.display = "block";
    SetCookie("flag", num);
}
function initfn() {
    if (getCookie('flag')) {
        var n = getCookie('flag');
        for (var i = 0; i < 3; i++) {
            $("help_center_leftmenu" + i).className = "";
            $("menu_content" + i).style.display = "none";
        }
        $("help_center_leftmenu" + n).className = "active";
        $("menu_content" + n).style.display = "block";
    }
}      
  
function showmenuitem(thisid){
     var items=document.getElementById("help_categories").getElementsByTagName("a");
    for(var i=0;i<items.length;i++){
        if(items[i].className=="style"){
            items[i].className="";
        }
    }
    thisid.className="style";
}
//写cookies函数
function SetCookie(name,value)//两个参数,一个是cookie的名子,一个是值
{
    var Days = 30; //此 cookie 将被保存 30 天
    var exp  = new Date();    //new Date("December 31, 9998");
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getCookie(name)//取cookies函数       
{
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
     if(arr != null) return unescape(arr[2]); return null;

}
function delCookie(name)//删除cookie
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
</script>
<style type="text/css">
#help_categories {
    width:157px;
    height:468px;
    background:#eff0f2;
    margin:4px 0 0 4px;
}
.classification {
    width:157px;
    float:left;
    height:auto;
}
.set_up {
    width:157px;
    float:left;
    height:auto;
}
.set_up h3 {
    text-align:center;
    background:#d2d8e4;
    height:auto;
    line-height:30px;
    font-size:12px;
    font-weight:bold;
    cursor:pointer;
}
.set_up h3.active {
    background:#e95412;
    height:auto;
    line-height:47px;
    color:#FFF;
}
.set_up h3 a, .set_up a {
    color:#000000;
    display:block;
}
.set_up ul li {
    width:150px;
    float:right;
    line-height:25px;
}
</style>
</head>

<body onload="initfn()">
<div id="help_categories">
        <div class="classification">
        
          <div class="set_up">
            <h3 id="help_center_leftmenu1"><a style="cursor:hand" onmousedown="showleftmenu(1)">项目浏览</a></h3>
            <ul id="menu_content1" style="display:none;">
           
            </ul>
          </div>
          <div class="set_up" style="margin-top:3px;">
            <h3 id="help_center_leftmenu2"><a style="cursor:hand" onmousedown="showleftmenu(2)">查询项目</a></h3>
            <ul id="menu_content2" style="display:none;">
           
            </ul>
          </div>
          <div class="set_up" style="margin-top:3px;">
            <h3 id="help_center_leftmenu0" class="active"><a style="cursor:hand" onmousedown="showleftmenu(0)">项目汇总</a></h3>
            <ul id="menu_content0">
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer" >·标志设计</a></li>
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer">·VI设计</a></li>
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer">·包装设计</a></li>
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer">·网站设计</a></li>
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer">·空间设计</a></li>
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer">·导示设计</a></li>
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer">·工业设计</a></li>
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer">·品牌顾问</a></li>
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer">·品牌命名</a></li>
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer">·广告设计</a></li>
              <li><a onclick="showmenuitem(this)" style=" cursor:pointer">·传媒设计</a></li>
            </ul>
          </div>
        </div>
      </div>
</body>
</html>

运行下试试

[ 本帖最后由 foktime 于 2010-8-11 16:51 编辑 ]
2010-08-11 16:38
gulimeksoft
Rank: 4
等 级:业余侠客
威 望:4
帖 子:53
专家分:208
注 册:2010-8-5
收藏
得分:0 
这个想法很有创意,只是一个HTML可能难以实现,我的想法是你可以设置个变量,变量保存上次点击的一级菜单的标记,在载入页面的时候执行onload="showleftmenu(变量)";而这个变量得保存在外部文件中,才能保证是刷新前设置的变量,你可以保存在一个XML,TXT等等或者一个数据库中
2010-08-11 16:41
foktime
Rank: 11Rank: 11Rank: 11Rank: 11
来 自:奥斯维辛
等 级:贵宾
威 望:35
帖 子:795
专家分:2742
注 册:2009-9-4
收藏
得分:0 
楼上小哥,你把简单问题复杂化了 你要相信js可以的
2010-08-11 16:46
liweilkm
Rank: 1
等 级:新手上路
帖 子:9
专家分:0
注 册:2010-8-11
收藏
得分:0 
回复 2楼 foktime
先谢谢了!辛苦了,不连接页面的情况下刷新是不会变,但是一旦连接到了一个页面他就变回来了,
图片附件: 游客没有浏览图片的权限,请 登录注册
点这个后下面的收起来,第二个变换背景,到另一页面也还是这个样式。
<body onload="initfn()">放BODY里面?

[ 本帖最后由 liweilkm 于 2010-8-11 17:07 编辑 ]
2010-08-11 17:03
liweilkm
Rank: 1
等 级:新手上路
帖 子:9
专家分:0
注 册:2010-8-11
收藏
得分:0 
谢谢了 ,我知道问题所在了,我没有onload="initfn()"这句话放到BODY里面所有不行!可以教我学习JS吗?我真的很想学习,前台我就是在JS这里很烂。
2010-08-11 17:11
foktime
Rank: 11Rank: 11Rank: 11Rank: 11
来 自:奥斯维辛
等 级:贵宾
威 望:35
帖 子:795
专家分:2742
注 册:2009-9-4
收藏
得分:0 
回复 6楼 liweilkm
有问题来这问就行
另外,你的代码问题是实现功能思路不清晰,量多易走弯路


[ 本帖最后由 foktime 于 2010-8-11 17:23 编辑 ]
2010-08-11 17:18
liweilkm
Rank: 1
等 级:新手上路
帖 子:9
专家分:0
注 册:2010-8-11
收藏
得分:0 
回复 7楼 foktime
好的。有什么好点的学习资料吗?
2010-08-11 17:21
foktime
Rank: 11Rank: 11Rank: 11Rank: 11
来 自:奥斯维辛
等 级:贵宾
威 望:35
帖 子:795
专家分:2742
注 册:2009-9-4
收藏
得分:0 
看这帖子吧
https://bbs.bccn.net/thread-293461-1-3.html
一些js基础知识
现在不是版主了,无法将贴子置顶了
2010-08-11 17:25
liweilkm
Rank: 1
等 级:新手上路
帖 子:9
专家分:0
注 册:2010-8-11
收藏
得分:0 
图片附件: 游客没有浏览图片的权限,请 登录注册
2010-08-12 08:49
快速回复:JS问题很急,请各位看下。
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.031346 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved