获取URL哈希位置，并在jQuery中使用它

我想在当前页面的URL中获取哈希值后的值，然后将其应用于新函数中。

该网址可能是

www.example.com/index.html#foo

我想将其与以下代码结合使用

$('ul#foo:first').show();

我有点假设/希望有某种方法可以将其捕获，并将其转换为变量，然后在第二段代码中使用。

编者注：以下方法具有严重的安全隐患，并且根据所使用的jQuery版本，可能使您的用户遭受XSS攻击。有关更多详细信息，请参阅此答案的注释或有关Security Stack Exchange的解释中有关可能的攻击的讨论。

您可以使用该location.hash属性来获取当前页面的哈希值：

var hash = window.location.hash;
$('ul'+hash+':first').show();

请注意，此属性#开头已包含符号。

实际上，:first由于使用ID选择器，因此您不需要伪选择器，前提是ID 在DOM中是唯一的。

如果要从URL字符串获取哈希，可以使用以下String.substring方法：

var url = "http://example.com/file.htm#foo";
var hash = url.substring(url.indexOf('#')); // '#foo'

建议：请注意，用户可以根据需要更改哈希，将任何内容注入到选择器中，您应在使用哈希之前对其进行检查。

location.hash对于IE是不安全的，对于IE（包括IE9）而言，如果您的页面包含iframe，则在iframe内容内部手动刷新后，获取location.hash值是old（首次加载页面的值）。虽然手动检索的值与location.hash不同，所以请始终通过document.URL进行检索

var hash = document.URL.substr(document.URL.indexOf('#')+1) 

对于那些正在寻找纯javascript解决方案的人

 document.getElementById(location.hash.substring(1)).style.display = 'block'

希望这可以节省您一些时间。

从jQuery 1.9开始，:target选择器将匹配URL哈希。因此，您可以执行以下操作：

$(":target").show(); // or $("ul:target").show();

它将选择ID与哈希匹配的元素并显示它。

如果当前页面包含哈希，我建议先使用cek。否则将是undefined。

$(window).on('load', function(){        
    if( location.hash && location.hash.length ) {
       var hash = decodeURIComponent(location.hash.substr(1));
       $('ul'+hash+':first').show();;
    }       
});

我正在使用它来解决@CMS答案中指出的安全隐患。

// example 1: www.example.com/index.html#foo

// load correct subpage from URL hash if it exists
$(window).on('load', function () {
    var hash = window.location.hash;
    if (hash) {
        hash = hash.replace('#',''); // strip the # at the beginning of the string
        hash = hash.replace(/([^a-z0-9]+)/gi, '-'); // strip all non-alphanumeric characters
        hash = '#' + hash; // hash now equals #foo with example 1

        // do stuff with hash
        $( 'ul' + hash + ':first' ).show();
        // etc...
    }
});