如何编写这个简单的javascript或jquery？

我有一些导航链接，如下所示：

<ul id="nav">
   <li><a href="index.html">Home</a>
   <li><a href="about.html">About</a>
   <li><a href="contact.html">Contact</a>
</ul>

请注意:

URL可以有其他参数，如：

about.html？foo=bar&bar=loo

因此，无论使用什么方法来检测url，都不应该考虑参数，而应该只考虑页面名称和扩展名

我更愿意用普通的JavaScipt实现这一点，因为我没有在站点上使用jQuery，但两者都可以

编辑 从另一个页面登录时，索引页面的url中有index.html，但如果域类型为，则显示为：

http://www.sitename.com/

因此，如果未指定任何页面，则应将活动类附加到主列表的标记。

简单版本

window.onload=function() {
  var activeLi;
  if (location.pathname) { 
    var fileName = location.pathname.substring(pathname.lastIndexof('/')+1);
  /* just take the start - 
     not handling filenames that are substrings of other filenames 
     nor filenames with more than one dot. */
    fileName = fileName.split('.')[0]; 
    var links = document.getElementById('nav').getElementsByTagName('a');
    for (var i=0;i<links.length;i++) {
      if (links[i].href.indexOf(fileName)==0) { // starts with filename
        activeLi = links[i].parentNode;
        break; 
      }
    }
  }
  else { // no page given
    activeLi = document.getElementById('nav').getElementsByTagName('li')[0];
  }
  if (activeLi) activeLi.className="active";
}

window.onload=function（）{
活性变种；
if（location.pathname）{
var fileName=location.pathname.substring（pathname.lastIndexof（'/'）+1）；
/*开始吧-
不处理作为其他文件名的子字符串的文件名
也不能使用多个点的文件名*/
fileName=fileName.split（'.'）[0]；
var links=document.getElementById（'nav'）.getElementsByTagName（'a'）；
对于（var i=0；ijQuery:

if(window.location.pathname === '') {
     $('#nav li:first-child').addClass('active');
}
else {
    var path = window.location.pathname;
    path = path.substr(path.lastIndexOf('/') + 1);
    $('#nav li').filter(function(index) {            
        return path === $(this).children('a').attr('href');
    }).addClass('active');
}

纯JavaScript：

var menu_elements = document.getElementById('nav').children;
if(window.location.pathname === '') {
     menu_elements[0].className += ' active';
}
else {
    var path = window.location.pathname;
    path = path.substr(path.lastIndexOf('/') + 1);
    for(var i = menu_elements.length; i--;) {
        var element = menu_elements[i];
        var a = element.children[0];
        if(a.href === path) {
            element.className += ' active';
            break;
        }
    }
}

注意：。如果您遇到与
子项有关的任何问题
，您可以使用相应的
getElementsByTagName
调用来替换此问题。

//获取子域url
var currentUrl=window.location.href，
splitUrlArr=currentUrl.replace（/\？.*/，''）.split（'\/'）；
subDomainUrl=splitUrlArr[splitUrlArr.length-1]；
//如果url与站点主url匹配，则将类名“active”添加到第一个li
if（splitUrlArr.join（'\/'）==currentUrl）{
document.getElementById（'nav'）.getElementsByTagName（'li'）[0].className=“active”；
}否则{
//找到匹配的href并将className“active”添加到其父级li
var targetLi=null；
var links=document.getElementById（'nav'）.getElementsByTagName（'a'）；
对于（变量i=0；i
你想这样做是为了美观还是为了功能？因为如果你是为了样式而添加那个类，你有CSS伪类：activeOk，我添加了更改。下次请一次发布所有问题…@mplungjan:不，为什么要这样做？它使用不同的方法，可能更兼容一些…+1我会删除整个过程中的循环
a
元素，因为可以假设每个列表元素只包含一个链接。但是您有一些缺陷：如果URL类似于
../contact.php#foo/bar
，那么您的方法不再有效，它应该是
indexOf（fileName）
。我会在.html之后删除所有内容-如果它更改为php或可能更改，那么我可以删除点之后的任何内容-固定不变（以及“文件名”，谢谢。我会在a上循环，因为这是我可以测试的对象。否则我将不得不选择li[x]。getElementsByTagName（'a'）[0]或者childnodes/childnodes可以是非IE-hohum中的textnode，parentNodes也可以是yeah@mplungjan：啊，很抱歉，对了，您在列表中循环了所有
a
，而不是在每个列表项中循环了它们。我错过了这一点。很抱歉，我的示例选得不好，我不是指不同的文件结尾，而是指文件后面的任意位置出现斜杠时ame（
#foo/bar
）。啊，是的。那会很不方便：）但是你也是：
path=path.substr（path.lastIndexOf（'/'）+1）；
@mplungjan:但是我只取URL的路径，不包括查询和散列。。。
var menu_elements = document.getElementById('nav').children;
if(window.location.pathname === '') {
     menu_elements[0].className += ' active';
}
else {
    var path = window.location.pathname;
    path = path.substr(path.lastIndexOf('/') + 1);
    for(var i = menu_elements.length; i--;) {
        var element = menu_elements[i];
        var a = element.children[0];
        if(a.href === path) {
            element.className += ' active';
            break;
        }
    }
}


//Get sub-domain url 
var currentUrl = window.location.href,
    splitUrlArr = currentUrl.replace(/\?.*/,'').split('\/');
    subDomainUrl = splitUrlArr[splitUrlArr.length-1];
//if url matches the site home url, add classname 'active' to first li
if(splitUrlArr.join('\/') == currentUrl) {
    document.getElementById('nav').getElementsByTagName('li')[0].className = "active";
}else {
    //Find the matching href and add className 'active' to its parent li
    var targetLi = null;
    var links = document.getElementById('nav').getElementsByTagName('a');
    for (var i=0; i < links.length; i++) {
        if (links[i].href === subDomainUrl) { 
            targetLi = links[i].parentNode;
            break; 
        }
    }
    if(targetLi) { targetLi.className = "active"; }
}