Question

我需要能够只显示锚定的div并能够与该锚点共享链接。它没有按预期工作（尝试bar1 (blank) bar2 (blank)链接）。使用锚点bar1或bar2（www.foo.bar/main.html#bar1）加载main.html页面（如下所示）无法正确处理css和jQuery bar1（或bar2 ）从文件加载。另一方面，如果将#foo元素作为html字符串附加，则锚定链接似乎有效（例如www.foo.bar/main.html#foo）。要比较行为，请点击foo (blank)，bar1 (blank)，bar1，bar2 (blank)和bar2链接，bar1 (blank)和bar2 (blank)链接无法显示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>

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

3 个答案: