CSS + 锚 link 到使用 jQuery 从文件中动态加载的元素不起作用

Question

我需要能够仅显示锚定 div 并能够与该锚点共享 link。它没有按预期工作（尝试 bar1 (blank) bar2 (blank) link）。如果 bar1（或bar2）是从文件加载的。另一方面，如果 #foo 元素附加为 html 字符串，则锚定 link 似乎有效（例如 www.foo.bar/main.html#foo）。要比较行为，请单击 foo (blank)、bar1 (blank)、bar1、bar2 (blank) 和 bar2 links、bar1 (blank) 和 bar2 (blank) links 无法显示 bar1（或 bar2）div。显然它与异步文件加载有关。有办法解决这个问题吗？

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:

<div id='bar1'>BAR1</div>

bar2.html:

<div id='bar2'>BAR2</div>

Answer 1

不确定你到底想做什么。

但请尝试将您的 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>

Answer 2

你可以为 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保持不变

Answer 3

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

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>

CSS + 锚 link 到使用 jQuery 从文件中动态加载的元素不起作用

CSS + Anchor link to dynamically loaded element from file using jQuery does not work

html

javascript

css

anchor

jquery