Question

我在div中有很少的锚标签，我需要检索所有锚标签的href值。例如

<div id="sample">
<ul>
<li><a href="/location1">Location1</a></li>
<li><a href="/location2">Location2</a></li>
<li><a href="/location3">Location3</a></li>
<li><a href="/location4">Location4</a></li>
</ul>
</div>

假设我在/location1，li href="/location1"应该有一个单独的背景颜色，例如红色。如果我在/location2，相应的li应该具有相同的红色。

我首先尝试检索页面网址，然后将其存储在变量中。

var pageurl = (window.location.pathname);

但不太确定如何检索href，然后根据页面网址对其进行映射。

Answer 1

你做这样的事情：

// Get the active link first
var $links = $('#sample a').filter(function() {
    return this.href && this.href == location.pathname;
});

// Highlight the current li having the link
$links.closest('li').addClass('active');

在活动类中设置您想要应用的任何样式。

Answer 2

这是jQuery代码，需要添加jQuery库才能工作。它将适用于页面加载

jQuery(document).ready(function(){
    var url=document.URL.split('?')[1];
    if(url == undefined){
        url = '';
    }
    if(url != ''){
        url = '#'+url;
        jQuery(url).trigger('click');
    }
    var url=document.URL.split('?')[1];
    if(url == undefined){
        url = '';
    }
    if(url != ''){                      
        // do here what you want to do
    }
    }
);

Answer 3

$(document).ready(function(){
    $('#sample ul li a').each(function(e){
        var href = $(this).attr('href');
        // do something with href
    });

}）;

使用页面URL映射href值

3 个答案: