如何使整个DIV可点击并在单独的DIV中打开子链接? [英] How can I make entire DIV clickable AND open child links in separate DIV?

问题描述

我在这里问了这个问题的先驱:在DIV中单击链接并在中显示PHP/HTML单独的DIV

I asked a precursor to this question here: Click link in DIV and show PHP/HTML in separate DIV

然后，在删除了下面显示的第一个脚本之后，我能够使第二个脚本正常工作.我修改了我的问题，但它似乎保持沉默.所以我有一个稍作修改的问题.

Then, after I removed the first script shown below, I was able to get the second script to work. I revised my question, but it appears to have gone silent. So I have a slightly modified question.

以下两个脚本之间有什么冲突，如何修改它们以使其协同工作?基本上，我希望能够在DIV(".side_items")中的任意位置单击，并在单独的DIV("#main_content")中打开子锚链接

What is the conflict between the 2 scripts below and how can I modify them to work in tandem? Basically I want to be able to click anywhere in the DIV (".side_items") and have the child anchor links open in a separate DIV ("#main_content")

JavaScript:

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 :(略有简化)

HTML: (slightly simplified)

<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>

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

Both scripts work independently to achieve their individual desired result.

推荐答案

这可以做到:

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

打破现状:

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

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

Find all the elements with a class of side_items and assign a click event handler (fn) to them. Each time one of these elements is clicked, fn is executed with the context of the element. In the discarded code you were using the selector .side_items a, which meant the click handler was only bound to the links inside the div, not the div itself.

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

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

Find all the links that are contained within the current element (this), and get the value of the href attribute from the first element found. In the discarded code the context (this) was a link. Since our handler is now bound to the containing div, the context is also the div. To get the link you have to find it.

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

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

Find the element with an id of main_content and load the content found at href into it. In the discarded code you were setting location.href, which causes the page to navigate away.

这篇关于如何使整个DIV可点击并在单独的DIV中打开子链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！