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

问题描述 投票:1回答:3

如何检查某些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())。

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

javascript jquery html css preventdefault
3个回答
3
投票

你在.缺少一个$('#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>

0
投票

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

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

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


0
投票

您的代码中的<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'
        });
    }

    });

});
© www.soinside.com 2019 - 2024. All rights reserved.