Question

我希望当我输入这个问题时，我会看到一些我错过的东西，但以防万一......

我在一年前做了类似的事情，它在另一个网站上工作得很好，我在代码上排队，但由于某种原因，这次它无法正常工作。行为应该是当我点击链接时，它会加载一个包含外部内容的div，而不是像http://www.example.com/#internet-div

那样转到我网站的根目录

以下是我正在使用的代码：

$(document).ready(function(){
    $("#all-insights-link").click(function(){
        $("#all-div").load("/insights-category-divs/all-categories-tab");
    });
    $("#internet-insights-link").click(function(){
        $("#internet-div").load("/insights-category-divs/internet-tab");
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<ul>
<li><a href="#all-div" id="all-insights-link" class="-active">All Categories</a></li>
<li><a href="#internet-div" id="internet-insights-link">Internet</a></li>
</ul>


<!-- All categories -->
<div id="all-div">
              
all categories content to load on initial page, will disappear when "Internet" link is clicked
              
</div><!-- / #All categories -->
                    
<!-- Internet -->
<div id="internet-div">
              
</div><!-- / #Internet -->

Answer 1

"/insights-category-divs/all-categories-tab"和"/insights-category-divs/all-categories-tab"无法访问文件，因为没有文件扩展名且.load()需要文件。它应该是这样的：

$(document).ready(function(){
    $("#all-insights-link").click(function(){
        $("#all-div").load("/insights-category-divs/all-categories-tab.html");
    });
    $("#internet-insights-link").click(function(){
        $("#internet-div").load("/insights-category-divs/internet-tab.php");
    });

});

Answer 2

Anthony C在评论中是正确的，我需要将event.preventDefault（）添加到我的代码中，并确保它仅适用于该类。最终代码如下：

$(document).ready(function(){
$(".-categories a").on("click", function(e) {
  e.preventDefault();
});
$("#all-insights-link").click(function(){
    $("#show-content-div").load("/insights-category-divs/all-categories-tab");
});
$("#internet-insights-link").click(function(){
    $("#show-content-div").load("/insights-category-divs/internet-tab");
});

});

div没有使用jquery正确更新

2 个答案: