Question

如何检查某些a-tags的href属性是否与当前页面URL匹配（使用jQuery）？我想删除所有指向同一页面的链接。这是我的代码的当前状态：

HTML：

<div id="faq">
  <h2 class="sectionheading">FAQ</h2>
  <div class="accordion product" itemscope="" itemtype="http://schema.org/Question">
  <div class="accordion-group">
    <div class="accordion-heading">
      <strong itemprop="name">
       Question 1               
      </strong>
    </div>
    <div class="accordion-body schedule" itemprop="suggestedAnswer acceptedAnswer" style="display: none;">
      <p>Answer 1 <a href="www.test.de/test.html"></a></p>                
    </div>
  </div>
  </div>
  <div class="accordion product" itemscope="" itemtype="http://schema.org/Question">
    <div class="accordion-group">
      <div class="accordion-heading">
        <strong itemprop="name">
          Question 2                
        </strong>
      </div>
      <div class="accordion-body schedule" itemprop="suggestedAnswer acceptedAnswer">
        <p>Answer 3 <a href="www.test.de/test.html"></a></p>                
      </div>
    </div>
  </div>
  <div class="accordion product" itemscope="" itemtype="http://schema.org/Question">
      <div class="accordion-group">
        <div class="accordion-heading">
          <strong itemprop="name">
            Question 3                
          </strong>
        </div>
        <div class="accordion-body schedule" itemprop="suggestedAnswer acceptedAnswer">
          <p>Answer 3 <a href="www.test.de/test.html"></a></p>                
        </div>
      </div>
  </div>
</div>

jQuery的：

$('#faq accordion-body a').each(function(){
    var a_href = $(this).attr('href');
    if(a_href == $(location).attr('href')){
        $(this).preventDefault();
        $(this).css({
            'color' : 'black',
            'text-decoration' : 'none'
        });
    }
});

应该解决位于accordion-bodys内的所有标签（有几个）。这些应该首先停用。然后应该调整样式（使用.css（））。

它不适用于我当前的代码。我做错了什么？

Answer 1

首先，您.中遗漏了一个$('#faq accordion-body a')，它应该是$('#faq .accordion-body a')

其次，您可以使用a_href == window.location.href查看它是否与当前页面匹配。

$('#faq .accordion-body a').each(function(){
    var a_href = $(this).attr('href');
    if(a_href == window.location.href){
        $(this).click(function(e) {
          e.preventDefault();
        })
        $(this).css({
            'color' : 'black',
            'text-decoration' : 'none'
        });
    }
});

演示

$('#faq .accordion-body a').each(function(){
    var a_href = $(this).attr('href');
    if(a_href == window.location.href){
        $(this).click(function(e) {
          e.preventDefault();
        })
        $(this).css({
            'color' : 'black',
            'text-decoration' : 'none'
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="faq">
  <h2 class="sectionheading">FAQ</h2>
  <div class="accordion product" itemscope="" itemtype="http://schema.org/Question">
  <div class="accordion-group">
    <div class="accordion-heading">
      <strong itemprop="name">
       Question 1               
      </strong>
    </div>
    <div class="accordion-body schedule" itemprop="suggestedAnswer acceptedAnswer" style="display: none;">
      <p>Answer 1 <a href="https://stacksnippets.net/js"></a></p>                
    </div>
  </div>
  </div>
  <div class="accordion product" itemscope="" itemtype="http://schema.org/Question">
    <div class="accordion-group">
      <div class="accordion-heading">
        <strong itemprop="name">
          Question 2                
        </strong>
      </div>
      <div class="accordion-body schedule" itemprop="suggestedAnswer acceptedAnswer">
        <p>Answer 3 <a href="www.test.de/test.html"></a></p>                
      </div>
    </div>
  </div>
  <div class="accordion product" itemscope="" itemtype="http://schema.org/Question">
      <div class="accordion-group">
        <div class="accordion-heading">
          <strong itemprop="name">
            Question 3                
          </strong>
        </div>
        <div class="accordion-body schedule" itemprop="suggestedAnswer acceptedAnswer">
          <p>Answer 3 <a href="www.test.de/test.html"></a></p>                
        </div>
      </div>
  </div>
</div>

Answer 2

添加到Carsten的回复中，您可以通过执行以下操作来优化它

$('#faq .accordion-body a[href="'+window.location.href+'"]').each(function(){
        $(this).css({
            'color' : 'black',
            'text-decoration' : 'none',
            'pointer-events' : 'none'
        });
    }
);

这使它更简洁，更快一点。

Answer 3

代码中的

<a>代码没有超文本<a href="www.test.de/test.html"></a>尝试添加一些链接文字以查看下面的代码。一旦两个url匹配条件，那么你必须为当前a标签绑定一个没有默认动作的click事件（preventDefault（）这样做），所以稍后当你点击该链接时它不会显示默认值行为。

$(document).ready(function(){

  $('#faq').find('.accordion-body a').each(function(i,j){
    var a_href = $(this).attr('href');

    if(a_href == $(location).attr('href')){

        $(this).on('click', function(event){
                event.preventDefault();
           });

        $(this).css({
            'color' : 'black',
            'text-decoration' : 'none'
        });
    }

    });

});

检查某些a-tags的href属性是否与当前页面URL匹配（使用jQuery）？

3 个答案: