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-site时，会显示出来。如果我在index.html和我点击第二个链接没有“index.html”的例子一切正常，div出现。

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

我的jquery代码看起来像这样

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

我想要的是，如果我在index.html和我点击'index.html＃open-site'是页面不会重新加载但点击功能被触发并且div出现。

如果我在其他子网页上运行，例如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-site

的元素

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

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

上的示例

点击[href =“＃open-site”]的Jquery不能使用链接

2 个答案: