Question

我想在当前链接中添加“活动”类，我有以下代码：

jquery：

$("#products a").each(function() {
if(this.href == window.location || this.href == document.location.protocol + "//" + window.location.hostname + window.location.pathname)
$(this).addClass("selectedThumb");

}）;

html：

<div id="products">
  <a>First product</a>
  <a>Second product</a>
</div>

我希望最后只添加“selectedThumb”类所点击的当前链接。现在这个类正被添加到所有的标签中，我最终得到了这个：

<div id="products">
  <a class="selectedThumb">First product</a>
  <a class="selectedThumb">Second product</a>
</div>

这是一个产品图片缩略图查看器，所以我总是停留在当前页面上，而不是在点击链接后离开页面，而是在页面上更改产品缩略图。该代码工作正常。不确定这是否可能与它有关。

附加信息

我正在尝试添加“活动”状态/ css类的a标签是拇指图像，当悬停时有一个鼠标悬停事件，在该页面中显示该拇指，并且拇指没有链接。

mouseover事件调用JS函数，显示正确的产品图像。

它所谓的JS：

function displayImage(index, parent){
var images = document.getElementById(parent).getElementsByTagName("div");

for(var i = 0; i < images.length; i++) {
  var image = images[i];
  if (image.className != 'pimage')  { continue }
  if(i == index-1) {
    image.style.display="block";
  }
  else {
    image.style.display="none";
  }     
}

}

因为链接并没有真正链接到任何地方，所以jQuery addClass被添加到所有缩略图链接中。

Answer 1

我会尝试在您的代码中更清楚地了解您要执行的操作。如果您尝试仅将某个类应用于某个链接，则只选择该链接：

$('#products a[href="' + window.location.href + '")
    .addClass('selectedThumb')
;

如果这是你经常需要经常选择的东西，那么扩展jQuery可能很简洁：

$.extend($.expr[':'], {
    currentPage: function(el) {
        return el.href && el.href === window.location.href;
    }
});

// then...
$('a:currentPage').addClass('selectedThumb');

Answer 2

也许尝试匹配网址（未经测试）：

var loc = window.location.href;
$("#products a").each(function() {
 if (loc.match(this.href) { $(this).addClass("selectedThumb"); }
});

jquery addclass到当前的标签，而不是div里面的所有标签

2 个答案: