使用jQuery从文件动态加载元素的CSS + Anchor链接不起作用

我需要能够只显示锚定的div并能够与该锚点共享链接。 它没有按预期工作（尝试bar1 (blank) bar2 (blank)链接）。 如果从文件加载bar1 （或bar2 ），则使用锚bar1或bar2 （ www.foo.bar/https://stackoverflow.com/questions/37413184/css-anchor-link-to-dynamically-loaded-element-from-file-using-jquery-does-not/main.html ）加载main.html页面（如下所示）无法正确处理css和jQuery。 另一方面，如果将#foo元素作为html字符串附加，则锚定链接似乎有效（例如www.foo.bar/https://stackoverflow.com/questions/37413184/css-anchor-link-to-dynamically-loaded-element-from-file-using-jquery-does-not/main.html ）。 要比较行为，请单击foo (blank) ， bar1 (blank) ， bar1 ， bar2 (blank)和bar2链接， bar1 (blank)和bar2 (blank)链接无法显示bar1 （或bar2 ）div。 显然它与异步文件加载有关。 有办法解决这个问题吗？

main.html中：

     $("
").load("bar1.html #bar1", function() { $('body').append($(this).html()); }); $("
").load("bar2.html #bar2", function() { $('body').append($(this).html()); }); $(function() { $( 'body' ).append("
FOO
"); });   div:not(:target) { display: none; } div:target { display: block; }    foo (blank) bar1 (blank) bar1 bar2 (blank) bar2   

bar1.html：

 
BAR1 

bar2.html：

 
BAR2 

Answer 1

不确定你完全想要做什么。

但是尝试将jQuery包装在文档中

Answer 2

你可以为main.html做这样的事情

        foo (blank) bar (blank) bar   

bar.html保持不变

Answer 3

添加了一个文件计数器和一个递减计数器以重置锚标记的函数。

main.html中

        foo (blank) bar1 (blank) bar1 bar2 (blank) bar2