I am facing an issue where I need to display only a specified anchored div and be able to share the link with that anchor. However, the functionality is not working as intended. When attempting to load the bar1 (blank) or bar2 (blank) link from the main.html page, which contains anchors bar1 or bar2 (www.foo.bar/main.html#bar1), there are problems with handling the CSS and jQuery if loaded from a file. Interestingly, when the #foo element is dynamically appended as an HTML string, the anchored link seems to work fine (e.g. www.foo.bar/main.html#foo). Clicking on the links such as foo (blank), bar1 (blank), bar1, bar2 (blank), and bar2 reveals that bar1 (blank) and bar2 (blank) fail to show the respective bar1 or bar2 div. This behavior seems to be related to asynchronous file loading. Is there a solution to overcome this challenge?
Main Content in main.html:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script>
$("<div>").load("bar1.html #bar1", function() {
$('body').append($(this).html());
});
$("<div>").load("bar2.html #bar2", function() {
$('body').append($(this).html());
});
$(function() {
$( 'body' ).append("<div id='foo' style='background-color:#8F8;'>FOO</div>");
});
</script>
<style>
div:not(:target) { display: none; }
div:target { display: block; }
</style>
</head>
<body>
<a href="main.html#foo" target="_blank">foo (blank)</a>
<a href="main.html#bar1" target="_blank">bar1 (blank)</a>
<a href="main.html#bar1">bar1</a>
<a href="main.html#bar2" target="_blank">bar2 (blank)</a>
<a href="main.html#bar2">bar2</a>
</body>
</html>
Contents of bar1.html:
<div id='bar1'>BAR1</div>
Contents of bar2.html:
<div id='bar2'>BAR2</div>