如何使整个 DIV 可点击并在单独的 DIV 中打开子链接？

Question

我在这里问了这个问题的前兆： Click link in DIV and show PHP/HTML in separate DIV

然后，在我删除下面显示的第一个脚本后，我能够让第二个脚本工作。我修改了我的问题，但它似乎已经沉默了。所以我有一个稍微修改的问题。

以下 2 个脚本之间有什么冲突？如何修改它们以协同工作？基本上我希望能够单击 DIV 中的任意位置（“.side_items”）并在单独的 DIV（“#main_content”）中打开子锚链接

Javascript：

<script type="text/javascript">
  $(document).ready(function(){ 
   $(".side_items").click(function(){
     window.location=$(this).find("a").attr("href");
     return false;
  })
 });
</script>

<script type="text/javascript">
  $(document).ready(function(){
   $(".side_items a").click(function(e){
    e.preventDefault(); 
       $("#main_content").load($(this).attr("href"));
    });
});

</script>

HTML：（略微简化）

<div id="main_content">
</div>

<div id="right_side">
  <div class="side_items">
  <a href="content.html">
  <img src="images/examplethumb.png" /><br />
  Content</a>
  </div>
</div>

两个脚本独立工作以实现各自所需的结果。

Answer 1

这样就可以了：

$(document).ready(function(){  
    $(".side_items").click(function(){ 
        $("#main_content").load($(this).find("a").attr("href"));
        return false; 
    }) 
});

分解：

$(".side_items").click(fn);

找到类为side_items 的所有元素，并为它们分配一个点击事件处理程序(fn)。每次单击其中一个元素时，fn 都会在该元素的上下文中执行。在丢弃的代码中，您使用了选择器.side_items a，这意味着点击处理程序仅绑定到 div 内的链接，而不是 div 本身。

$(this).find("a").attr("href")

查找当前元素 (this) 中包含的所有链接，并从找到的第一个元素中获取 href 属性的值。在丢弃的代码中，上下文 (this) 是一个链接。由于我们的处理程序现在绑定到包含 div，因此上下文也是 div。要获取链接，您必须找到它。

$("#main_content").load(href);

找到 id 为 main_content 的元素，并将在 href 找到的内容加载到其中。在丢弃的代码中，您设置了 location.href，这会导致页面导航离开。

Answer 2

我认为您的问题是您尝试分配 $().ready(..) 处理程序两次。

尝试像这样组合脚本

<script type="text/javascript">

var change_location = function(){ 
    $(".side_items").click(function(){
        window.location=$(this).find("a").attr("href");
        return false;
    });
}

var load_location = function(){
    $(".side_items a").click(function(e){
        e.preventDefault(); 
        $("#main_content").load($(this).attr("href"));
    });
}

$().ready(function(){
    change_location();
    load_function();
});
</script>

希望有帮助