Question

我想要做的是拥有一个执行的功能，以根据页面名称为<li>标签定义“当前”类。例如，如果页面名为index.php，我希望函数确定<li>标记内的链接是否与页面名称相同（index.php）。对不起，我不是最好的解释这个。这是一个示例代码。

<ul id="navigation"><li><a href="index.php"></li></ul>.

如果链接与页面名称相同，我希望将类“current”定义到<li>标记中。有没有办法做到这一点？或者我是徒劳的任务？

Answer 1

呃......好吧......

function liClass(context) {
   //Choose your parent node
   context = context || document;

   var pathparts = window.location.pathname.split('/'); //split on path
   var curfile = pathparts[pathparts.length-1]; //last item is the filename right?

   var lis = context.getElementsByTagName('li');
   for (var i=0, l=lis.length; i<l; i++) {
     var a = lis[i].getElementsByTagName('a');

     if (!a.length) continue; //li has no a, moving on...

     //Okay, this match might need some work, tried
     //to make it fairly forgiving, tweak for your needs
     if (a[0].href.indexOf(curfile) != -1) lis[i].className = 'current';
   }
}

随意尝试一下，让我知道它是否有效，因为我没有测试它...

Answer 2

我认为你要问的是你想要改变指向当前页面的链接的外观。这是代码的样子。

var list=document.getElementsByTagName('a');
var page=window.location.pathname;
var i=list.length;
while(i--){
  if(list[i].src.indexOf(page)>0){
    list[i].className='current';
  }
}

注意这不是一个非常准确的方法。基本结构是正确的，但是例如链接somewebsite.com实际上指向somewebsite.com/index.php。因此，根据链接，这可能会导致主页上出现问题。此外，根据您的链接设置方式，您可能需要解析页面变量。它将返回类似的东西。 /help/faq/foo.php，而页面可能只有faq / foo.php的链接。这一切都取决于您网站的设置，所以我将留给您调整。

自我发布以来，您添加了更多详细信息，因此我想请注意，您只需要在<li>标记中列出链接列表，而不是页面中的所有<a>标记。< / p>

Answer 3

比较位置对象的href和锚点DOM元素。如果它们匹配，那么这就是当前的类。

如果当前页面为http://www.example.com/home，其中包含相对链接，

<a href="/questions">Questions</a>

然后DOM对象的href属性将包含绝对路径，而不仅仅是相对部分。

link.href = "http://www.example.com/questions"

循环遍历每个链接的函数可以写为，

function markCurrent(list) {
    var listItems = list.getElementsByTagName("li");

    for(var i = 0; i < items.length; i++) {
        var link = listItems[i].getElementsByTagName("a")[0];
        if(link && (link.href == location.href)) {
            listItems[i].className += ' current';
        }
    }
}

将根<ul>节点传递给函数。

markCurrent(document.getElementById("navigation"));

用于在js中定义当前类的函数

3 个答案: