CSS +锚链接到使用jQuery从文件动态加载的元素不起作用
[英]CSS + Anchor link to dynamically loaded element from file using jQuery does not work
问题描述
I need to be able to show only anchored div and to be able to share the link with that anchor. 
我需要仅显示锚定的div，并能够与该锚定共享链接。 It is not working as expected (try bar1 (blank) bar2 (blank) link). 它未按预期工作（尝试使用bar1 (blank) bar2 (blank)链接）。 Loading main.html page (shown below) with an anchor bar1 or bar2 ( www.foo.bar/main.html#bar1 ) fails to properly handle css and jQuery if bar1 (or bar2 ) is loaded from file. 如果从文件加载bar1 （或bar2 ），则使用锚点bar1或bar2 （ www.foo.bar/main.html#bar1 ）加载main.html页面（如下所示）将无法正确处理css和jQuery。 On the other hand if #foo element is appended as html string then anchored link seems to work (eg www.foo.bar/main.html#foo ). 另一方面，如果#foo元素作为html字符串附加，则锚定链接似乎有效（例如www.foo.bar/main.html#foo ）。 To compare behavior click foo (blank) , bar1 (blank) , bar1 , bar2 (blank) and bar2 links, bar1 (blank) and bar2 (blank) links fail to show bar1 (or bar2 ) div. 要比较行为，请单击foo (blank) ， bar1 (blank) ， bar1 ， bar2 (blank)和bar2链接， bar1 (blank)和bar2 (blank)链接无法显示bar1 （或bar2 ）div。 Apparently it is related to asynchronous file loading. 显然，它与异步文件加载有关。 Is there a way to get around this issue? 有没有办法解决这个问题？
main.html: 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>
bar1.html: bar1.html：
<div id='bar1'>BAR1</div>
bar2.html: bar2.html：
<div id='bar2'>BAR2</div>
3 个解决方案
解决方案1
0 2016-05-24 13:15:59
Not sure what your fully trying to do. 不知道您要怎么做。
But try wrapping your jQuery in document ready 但是请尝试将jQuery包装在文档中
<script>
$(document).ready(function(){
$("<div>").load("bar.html #bar", function() {
$('body').append($(this).html());
});
$( 'body' ).append("<div id='foo' style='background-color:#8F8;'>FOO</div>");
});
</script>
解决方案2
0 2016-05-24 18:30:27
You could do something like this for main.html 您可以为main.html做这样的事情
<html>
<head>
<style>
div{
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("<div>").load("bar.html #bar", function() {
$('body').append($(this)[0].innerHTML);
});
var hash = window.location.hash;
$('a').on('click', function(){
if(!hash && !($(this).attr('target'))){
$('[id="'+$(this).attr('href').substring(1)+'"]').show('slow');
}
});
setTimeout(function(){
$('[id="'+hash.substring(1)+'"]').show('slow');
}, 100);
$('body').append("<div id='foo' style='background-color:#8F8;'>FOO</div>");
});
</script>
</head>
<body>
<a href="#foo" target="_blank">foo (blank)</a>
<a href="#bar" target="_blank">bar (blank)</a>
<a href="#bar">bar</a>
</body>
</html>
bar.html stays the same bar.html保持不变
解决方案3
0 已采纳 2016-05-25 11:46:14
Added a file counter and a function that decrements counter to reset the anchor tag. 添加了文件计数器和递减计数器的功能以重置锚标记。
main.html main.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script>
var count = 2;
function onDataHandled() {
if (--count <= 0) {
var hash = window.location.hash;
window.location.hash = '';
window.location.hash = hash;
}
}
$.get('bar1.html', function (data) {
$('body').append(data);
onDataHandled();
});
$.get('bar2.html', function (data) {
$('body').append(data);
onDataHandled();
});
$(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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.