如何在單獨的DIV中製作整個DIV可點擊和打開的子鏈接？

我問一個前兆這個問題在這裏： Click link in DIV and show PHP/HTML in separate DIV 如何在單獨的DIV中製作整個DIV可點擊和打開的子鏈接？

然後，在我刪除下面所示的第一個劇本，我能得到第二腳本工作。我修改了我的問題，但似乎已經沉默了。所以我有一個稍微修改的問題。

以下兩個腳本之間的衝突是什麼，以及如何修改它們以協同工作？基本上，我希望能夠在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>

這兩個腳本都可以獨立工作以實現各自的預期效果。

來源

2012-03-30 NewWorldOrderly

轉貼問題

嘗試梳理腳本是不是你應該做的，再有很多方法來撞你的問題得到重視，例如像什麼，編輯它。 – ajax333221 2012-03-30 22:46:16

我很抱歉。我一直非常積極地嘗試學習SO的適當使用，但是我仍然是一個n00b。我編輯了我以前的問題，而我的問題並不完全相同。我認爲這將是一個更簡單，不太混亂的問路。 – NewWorldOrderly 2012-03-30 22:50:48

雖然再次詢問這個稍微修改過的問題可能並不合適，但它在20分鐘內有效解決了我的問題。我以前的（編輯）問題已經超過2天了。 – NewWorldOrderly 2012-03-30 22:54:38

這將做到這一點：

$(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本身。

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

找到所有包含在當前元素（this）中的鏈接，並從發現的第一個元素href屬性的值。在丟棄的代碼中，上下文（this）是一個鏈接。由於我們的處理程序現在綁定到包含div，因此上下文也是div。要獲得鏈接，你必須找到它。

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

查找與main_content一個ID的元素，並加載在href到它找到的內容。在丟棄的代碼中，您設置了location.href，這會導致頁面離開。

來源

2012-03-30 22:45:51 gilly3

BOOM！謝謝！這工作完美。 – NewWorldOrderly 2012-03-30 22:53:10

我認爲你的問題是你試圖分配$（）。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>

希望幫助

來源

2012-03-30 22:49:01 SuperJumbo

感謝您花時間回答我的問題。我仍然在學習JavaScript和jQuery。 – NewWorldOrderly 2012-03-30 22:55:46

如何在單獨的DIV中製作整個DIV可點擊和打開的子鏈接？

回答

相關問題