Question

如何在html header.php中的当前菜单项页面上添加活动类。我在wordpress中添加了一个自定义菜单：

  <ul class="menuul">
            <li><a href="/#/" class="current">Начало</a></li>
            <li><a href="/#/muskulnamasa/">Действие</a></li>
            <li><a href="/#/sastavki/">Състав</a></li>
            <li><a href="/#/testosteron/">Тестостерон</a></li>
            <li><a href="/#/vuprosi/">FAQ</a></li>
            <li><a href="/#/mnenia/">Мнения</a></li>
            <li class="lastli"><a href="/#/porachka/">ПОРЪЧАЙ</a></li>
        </ul>

那么如何添加“活跃”呢？可能有一些JavaScript？还是PHP？我在网站上尝试了几个答案： i did try this(doesnt work)

also i tried this(doesnt work)

and this(no success); and finally this 似乎没什么用。我可能正在做一些必要的错误 - 请帮忙 - 谢谢！

PS：this didnt work too

回顾一下我需要的内容：

我想在当前菜单项（当前页面）中添加“active”类。不仅是其中一个页面，而且是任何活动页面。我需要一些东西来检测当前页面并为其添加一个类（在

或元素上 - 无论如何）。

Answer 1

使用简单的Css来做到这一点。仅在该li上使用活动类。给类css，就像给它一样（字体重量：粗体;颜色：某物;等等）。我猜你有每个链接的seprate页面。所以当用户去那个链接（那个页面）。只有该列表将具有类活动

Answer 2

如果你使用jQuery，

将以下代码放在一个可以被所有页面访问的常见javascript文件中。

获取网址的结尾，并使用与ID相同的<a>元素

url = window.location.href; //Get the current URL.
id = url.split("/").splice(-1);
if(id == ""){
    id = url.split("/").splice(-2); //URL ending with "/"
}
if(id != "" || type(id) != "undefined"){
    $(".menuul #"+id).addClass("current");
}else{
    $(".menuul li:first-child a").addClass("current");
}

在您的HTML中：

<ul class="menuul">
          <li><a href="/#/" class="current">Начало</a></li>
          <li><a id="muskulnamasa" href="/#/muskulnamasa/">Действие</a></li>
          <li><a id="sastavki" href="/#/sastavki/">Състав</a></li>
          <li><a id="testosteron" href="/#/testosteron/">Тестостерон</a></li>
          <li><a id="vuprosi" href="/#/vuprosi/">FAQ</a></li>
          <li><a id="mnenia" href="/#/mnenia/">Мнения</a></li>
          <li id="porachka" class="lastli"><a href="/#/porachka/">ПОРЪЧАЙ</a></li>
</ul>

CSS：

相应地设置current CSS类的样式。

Answer 3

您可以通过document.querySelectorAll()的结果进行简单循环来实现此目的在循环内部，您必须将元素（<a>标记）的href与location.href进行比较。

请注意，在下面的示例中，我在下面的示例中使用了硬编码字符串而不是location.href。

＆＃13;

var x = document.querySelectorAll('.menuul > li > a');
for (var i = 0; i < x.length; i++) {
  if (x[i].href == "https://stacksnippets.net/#/") {
    x[i].className += ' active';
  }
  console.log(i + ' has the classes: ' + x[i].className);
}

＆＃13;

.active {
  color: red;
}

＆＃13;

<ul class="menuul">
  <li><a href="/#/" class="current">Начало</a></li>
  <li><a href="/#/muskulnamasa/">Действие</a></li>
  <li><a href="/#/sastavki/">Състав</a></li>
  <li><a href="/#/testosteron/">Тестостерон</a></li>
  <li><a href="/#/vuprosi/">FAQ</a></li>
  <li><a href="/#/mnenia/">Мнения</a></li>
  <li class="lastli"><a href="/#/porachka/">ПОРЪЧАЙ</a></li>
</ul>

＆＃13;

Answer 4

哦，我花了4-5个小时找到它，所以...... 我在这里粘贴答案 - 可能有些人可以使用它。我将以下代码放在文件menu-active-file.js中并在页脚中指出：

 $(function () {
    var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");  
    $('a').each(function () {
                        if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
            $(this).addClass('active');
        }
    });
});

感谢所有答案。

Answer 5

只需添加当前答案，这就是我使用原始JavaScript的方式：

const currentPage = location.href;
const allAs = document.querySelectorAll('a');
const allAsLength = allAs.length

for (let i = 0; i < allAsLength; i++) {
  if ( allAs[i].href === currentPage ) {
    allAs[i].className = "active";
  }
}

如何在当前菜单项页面上添加活动类？ HTML

5 个答案: