Jquery 点击 a[href= "#open-site" ] 不适用于链接

Question

我有一个看起来像这样的导航：

<ul>
    <li><a href="index.html#open-site">Test</a></li>
    <li><a href="#open-site">Test</a></li>
    <li><a href="test.html#open-site">Test</a></li>
</ul>

当我点击 #open 网站时，会出现一个。如果 im 在索引上.html并且我在第二个链接上单击作为示例，没有"index.html"一切正常，并且div 显示出来。

但是，如果IM在索引上.html并且我单击第一个链接则没有任何反应。网站不会重新加载，也不会触发点击功能。

我的jquery代码看起来像这样

jQuery('a[href="#open-site"]').click(function () {
    jQuery('#content').animate({"left": "0px"});
})

我想要的是，如果 im 在索引上.html并且我单击"index.html#open-site"是页面不会重新加载，但会触发单击功能并显示div。

如果 im 在另一个子页面上，例如 test.html 我单击"index.html#open-site"，index.html 将加载并立即显示div。

Answer 1

每个选项都应该有一个选择器。

<ul>
    <li id="site1"><a href="index.html#open-site">Test</a></li>
    <li id="site2"><a href="#open-site">Test</a></li>
    <li id="site3"><a href="test.html#open-site">Test</a></li>
</ul>

然后，您尝试在这些选择器上触发事件。

Answer 2

希望我明白你想要的。希望对您有所帮助。

它严格按照选择器搜索元素。

jQuery('a[href="#open-site"]')

它仅返回 href = #open 站点的元素

要查找具有相同参数但不严格按照上述示例的所有元素，您需要过滤所有元素以查找必要的元素。我的代码示例并不理想，但它是一个您可以做的事情示例。

jQuery('a').each(function(index) {
    // we search the links with param in href attr from all links to attach the function
    if (jQuery(this).attr('href').search('#open-site') !== -1) {
        jQuery(this).click(function (e) {
            // e = event
            // e.preventDefault stops default behavior (changing location)
            e.preventDefault();
            jQuery('#content').animate({"left": "0px"});
        });
    }
});

关于 jsfiddle 的示例