Question

我在点击上添加有效课程，这会使点击的li项目看起来已选中。用户点击后重新加载页面，因此您看到点击有效，但重新加载后不再可见。我正在使用location.href。我们的想法是检查当前页面href是否可以在li的子元素中找到。如果为true，则应附加活动类。以下是代码：

function codeAddress() {
  var loc = location.href;
  var locNavs = document.getElementsByClassName("localLi").children;
  //window.alert(locNavs[0].class);
  for (var i = 0; i < locNavs.length; i++) {
    if (locNavs[i].location.href == loc) {
      locNavs[i].className += "active";
    }
  }
}

window.onload = codeAddress;

<ul id="menu-develop_menu" class="nav-menu">
  <li id="menu-item-130" class="localLi menu-item menu-item-type-post_type menu-item-object-page 
    menu-item-130"><a href="http://xxxxxx/dev/get/">xxx</a>
  </li>
</ul>

我不想使用localstorage或其他东西，但这不起作用。我不完全理解jQuery，所以需要JavaScript。

如何在重新加载后保留依赖于href的hightlight类？

Answer 1

首先，您需要包含空格或使用其他方法添加类：

$(function() {
// Highlight the active nav link.
var url = window.location.pathname;
var filename = url.substr(url.lastIndexOf('/') + 1);
$('.navbar a[href$="' + filename + '"]').parent().addClass("active");

OR

locNavs[i].className += " active";

注意：您的href必须与此方法匹配，可能有更好的方法，例如locNavs[i].classList.add("active"); //polyfill available for older browsers属性已知元素，例如您拥有的data-current="mycurrent"。

现在给出你要检查子'a'元素href属性的所有内容。

<ul id="menu-develop_menu" class="nav-menu">

function codeAddress() {
  var loc = location.href;
  var locNavs = document.getElementsByClassName("localLi");
  //window.alert(locNavs[0].class);
  for (var i = 0; i < locNavs.length; i++) {
    if (locNavs[i].getElementsByTagName('a')[0].getAttribute("href") == loc) {
      locNavs[i].className += " active";
    }
  }
}

window.onload = codeAddress;

鉴于这一切，这似乎是一种“脆弱”的方式。

测试概念

<ul id="menu-develop_menu" class="nav-menu">
  <li id="menu-item-130" class="localLi menu-item menu-item-type-post_type menu-item-object-page 
    menu-item-130"><a href="http://xxxxxx/dev/get/">xxx</a>
  </li>
</ul>

var testhref = "http://xxxxxx/dev/get/";

function codeAddress() {
  var loc = testhref; // location.href;
  var locNavs = document.getElementsByClassName("localLi");
  for (var i = 0; i < locNavs.length; i++) {
    if (locNavs[i].getElementsByTagName('a')[0].getAttribute("href") == loc) {
      locNavs[i].className += " active";
    }
  }
}

window.onload = codeAddress;

.active {
  border: solid lime 2px;
}

Answer 2

＆＃13;

function codeAddress() {
  var loc = "http://xxxxxx/dev/get/";
  var locNavs = document.getElementsByClassName("localLi")[0].children;
  window.alert(locNavs.length);
  for (var i = 0; i < locNavs.length; i++) {

    if (locNavs[i].getAttribute("href") == loc) {
    console.log(locNavs[i])
      locNavs[i].className += "active";
    }
  }
}

window.onload = codeAddress;

＆＃13;

.active{
color:green;
}

＆＃13;

<ul id="menu-develop_menu" class="nav-menu">
  <li id="menu-item-130" class="localLi menu-item menu-item-type-post_type menu-item-object-page 
    menu-item-130"><a href="http://xxxxxx/dev/get/">xxx</a>
  </li>
</ul>

＆＃13;

此代码可用于更改锚标记的颜色

＆＃13;

function codeAddress() {
  var loc = "http://xxxxxx/dev/get/";
  var locNavs = document.getElementsByClassName("localLi")[0].children;
  window.alert(locNavs.length);
  for (var i = 0; i < locNavs.length; i++) {
  console.log(1)
    if (locNavs[i].getAttribute("href") == loc) {
    console.log(locNavs[i])
      locNavs[i].className += "active";
    }
  }
}

window.onload = codeAddress;

＆＃13;

如何使用javascript中的href在加载时添加活动类？

2 个答案: