Question

我有多个锚标记，我想匹配他们的href属性。根据匹配，应显示div。我使用了以下代码，但它没有用。

<div class="form-group search-form" style="display: none;">
    <input type="text" class="form-control">
</div>

<ul>
    <li><a href="abc.aspx">1</a></li>
    <li><a href="def.aspx">2</a></li>
    <li><a href="ghi.aspx">3</a></li>
</ul>

if ($("li a[href='abc.aspx']")) {                   
    $("input.search-form").css('display', 'block');
}

Answer 1

您可以遍历所有li a元素，并根据href属性使用.attr("href")过滤元素。检查属性值可以使值不同。这也允许您使用已定义的URL字符串列表（例如['abc.aspx', 'def.aspx', ...]）并创建通用解决方案，您可以在其中循环遍历该列表。否则，对于通用解决方案，您需要创建连续的字符串（li a[href='abc.aspx']），这不是那么整洁。

$("li a").each(function() {
   var href = $(this).attr("href");

   if(href === 'abc.aspx') {
       $("input.search-form").css('display', 'block');
   } else if(href === 'def.aspx') {
       $("input.search-form").css('display', 'block');
   } else if(href === 'ghi.aspx') {
       $("input.search-form").css('display', 'block');
   }
}

Answer 2

由于一个对象是一个真正的值，所以$("li a[href = 'abc.aspx']")总是不真实的，所以请检查长度属性以检查它是否存在。虽然您可以使用show()方法来显示隐藏元素。

if ($("li a[href = 'abc.aspx']").length) {                   
  $("input.search-form").show();
}

使用toggle()方法更具体。

$("input.search-form").toggle($("li a[href = 'abc.aspx']").length > 0);

Answer 3

我没有点击该链接只是找到它

直接在if条件下使用jQuery对象将始终等同于true。因此，您需要使用jQuery对象的length属性来发现找到的元素的数量。

在您的情况下，您可以对要显示的内容使用toggle()方法，并检查选择器的length属性以获取相关的a元素。试试这个：

$('.input.search-form').toggle($("li a[href='abc.aspx']").length != 0);

Working example

如何根据jquery中锚点选项卡列表的href显示div

3 个答案: