<a>單擊</a>該<a>鏈接時，在JQuery顏色框中</a>打開<a>鏈接</a>的URL

Question

我需要有關此JQuery代碼的幫助。.當涉及到JQuery時，我仍然是一個新手，但是我有很多代碼可以進行測試..您知道萬一需要時，這里是代碼。

<script type="text/javascript">
//onload popup
$(function()
{
    $(window).bind('load', 
        function(e) 
        {
            $.colorbox({opacity:0.3, href:"ext/popup.php"}); 
        });
});

</script>

現在這一次，我不想加載頁面，然后讓表單彈出。.我不想像鏈接一樣單擊。.有什么建議嗎？

Answer 1

$(function()
{
    $('#linkid').click(function(e) 
        {
            e.preventDefault();
            $.colorbox({opacity:0.3, href: this.href}); 
        });
});

並創建一個像這樣的鏈接

<a href="ext/popup.php" id="linkid">click me</a>

---

更新資料

如果要將此邏輯應用於多個鏈接，則應使用類而不是ID

<a href="ext/popup.php" class="colorbox">click me</a>

並為jquery定位他們

$('.colorbox').click(...)

---

評論

對代碼的通用注釋，您無需使用$(function(){..})和$(window).bind('load' 。
第一部分將事件綁定到准備就緒的DOM上。 第二個是DOM負載。
由於load總是在 ready事件之后發生，因此您可以直接執行

$(window).load(function(){...});

但是，只有在需要在運行代碼之前完全加載了子元素（ 通常是images ）時，才應使用加載。
讀取： http : //api.jquery.com/load-event/

Answer 2

$('a#yourLinkId').click(function(e){
  // prevents default behaviour
  e.preventDefault();

  // your stuff
  $.colorbox({opacity:0.3, href:"ext/popup.php"}); 

});

Answer 3

沒問題。 您可以在Stackoverflow中詢問有關JQuery的任何問題，我們會盡力提供幫助。

關於你的問題。 我認為您想使用JQuery在ColorBox中加載頁面，而不是在主窗口中加載URL的默認操作。

您需要做兩件事：

1. 將事件處理程序綁定到所有錨標記（ <a> ），以便每當單擊它們時都將運行事件。
2. 阻止默認事件處理程序打開URL（preventDefault）

您可以將事件綁定到所有錨標記，如下所示：

//for all links that exist on this page up to when this line is executed
$("a").click(function(){...});

但是我建議使用on()按鈕綁定事件。 這樣，所有<a>標記都將運行此事件處理程序，即使它們是在事件綁定代碼運行之后創建的。

//for all links that are created on this page even after this lines of code is executed
$("a").on( "click", function(){...});

為了防止默認操作（瀏覽頁面），您只需使用preventDefault（）方法：

//assuming event argument is called e
e.preventDefault();

話雖如此，您的代碼將如下所示：

<script type="text/javascript">
//this will run when the current document is loaded
$(document).ready(function(){
    $("a").on("click",function(e){
        e.preventDefault();
        //$(this).attr("href") contains the href attribute of the <a> tag
        $.colorbox({opacity:0.3, href:$(this).attr("href")});
    });
});
</script>