| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 1102 人关注过本帖
标题:网站导航中如何实现访问当前栏目时就导航出现一点变化
只看楼主 加入收藏
li3083
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2008-10-20
收藏
 问题点数:0 回复次数:2 
网站导航中如何实现访问当前栏目时就导航出现一点变化
网站导航中如何实现访问当前栏目时就导航出现一点变化

就象现在如果你的网站有
首页
新闻中心
下载中心
影视频道
联系我们。。。。

当你在首页时首页的背景会有点不同
当你在新闻中心时新闻中心的背景会有点不同
。。。。。。。。

我知道每个栏目都用不同的头部来做,可以实现
不知道可以用一个头部搞定吗?

这个问题困扰我很久了,不知道有没有人知道呢
搜索更多相关主题的帖子: 栏目 导航 访问 
2008-10-20 19:50
li3083
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2008-10-20
收藏
得分:0 
ps别人给了我这个js但是不知道改怎么用,如何修改,什么意思

如果这个可以的话希望可以帮忙弄了怎么修改的说明来

$("#nav>li>a").each(function(i){
    if(window.location.toString().split("/")[4] != ""){
  if(this.href.indexOf(window.location.toString().split("/")[4])!= -1){
    $(this).addClass("current");
   }}
 })
2008-10-22 11:52
frankqnj
Rank: 4
等 级:贵宾
威 望:12
帖 子:320
专家分:278
注 册:2008-4-6
收藏
得分:0 
别人给你的代码 好象需要 Jquery  那么我给你两个 函数 你可以代替上面的代码来实现...

就说说思路吧.. 上面的代码 是通过一个 查询字符串 也就是 一般cgi程序里的 QueryString("field")

当然.前提是 你需要给你的导航菜单 的链接 都加上 a href="123.htm?page=index" 这样的东西

然后通过 page= *** 判断当前页  然后通过 addClass方法 给链接 加上css class  通过这个 在css里设置 这个 .current {} 的样式 来实现 你说的功能

那么
你可以用这个函数 来取得查询字符串

    function QueryString(fieldName) {
        var urlString = document.location.search;
        if (urlString != null) {
            var typeQu = fieldName + "=";
            var urlEnd = urlString.indexOf(typeQu);
            if (urlEnd != -1) {
                var paramsUrl = urlString.substring(urlEnd + typeQu.length);
                var isEnd = paramsUrl.indexOf('&');
                if (isEnd != -1) {
                    return paramsUrl.substring(0, isEnd);
                }
                else {
                    return paramsUrl;
                }
            }
            else
                return false;
        }
       return false;
    }  

比如 if(QueryString('page')=='index')  则取得相应的 节点 即 导航中的链接  这部分逻辑你需要自己写了
然后使用下面这个函数 设置对象的 class属性

 function setNodeAttribute_Class(node, className) {
        if (!(node = ID(node))) return false;
        if (document.all) {// IE方法
            node.setAttribute('className', className)
            return true;
        }
        node.setAttribute('class', className); //W3C DOM 方法
        return true;
    }
比如 setNodeAttribute_Class(node,'current') 这个和$(this).addClass("current"); 的功能应该是一样的
2008-10-22 15:31
快速回复:网站导航中如何实现访问当前栏目时就导航出现一点变化
数据加载中...
 
   



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

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