Jquery 要加载的HTML对话框中的虚拟链接

如何在html中创建死链接

我需要在我的网页中提供一个“链接”，打开一个jquery对话框。我无法提供href，因为它会加载页面。我只是希望链接看起来像一个链接。所以我尝试了以下方法

<a id='opener_guid' > Click here to load jquery message box</a>

单击此处加载jquery消息框

jquery加载工作正常，但链接只是以简单文本的形式出现。用户不知道它是可点击的。

---

如何解决这个问题？

只需将a href添加到nowhere即可使锚定成为链接

<a id='opener_guid' href="#" > Click here to load jquery message box</a>

然后，为了防止导航到yourpage.ext#，您可以单击

返回false

，和/或在此处调用

preventDefault（）

您的文本

您可以这样做（老式）：

或者像这样（内联）：

或者像这样（土生土长）：

document.getElementById（'opener\u guid'）。单击=函数（）{
openDialog（'Dummy！'）；
返回false；
};

或者像这样（jQuery）：

$（“#opener_guid”）。单击（函数（）{
openDialog（'Dummy！'）；
返回false；
});

注意：您必须自己编写

openDialog（）

，在上面的示例中，它只是一个占位符。

您可以像

那样放置

阻止链接执行其默认操作

$( "#opener_guid" ).click(function(e) {
 e.preventDefault();
 // your code
});

你需要一个href

<a href='#' id='opener_guid' > Click here to load jquery message box</a>

---

如果它不是一个真正的链接，你应该使用一个

按钮，而不是
a
，这就是按钮的用途，并以你喜欢的任何方式通过css对其进行样式化；在这种情况下，您似乎希望它看起来像一个链接

<button id="opener_guid" type="button">Click here to load jquery message box</button>

css属性取决于您的需要，我省略了颜色、字体等
 这应该有效：

$(function() {
    $( "#opener_guid" )
        .button()
        .click(function() {
        $( "#dialog-form" ).dialog( "open" );
    });
});

简单地说，添加以下css：

#opener_guid {
    cursor:pointer;
}


这使得鼠标转向我们都熟悉的手，我们都知道和爱的链接。然后，您可以更改悬停时的颜色等，因为您认为它不是“死链接”

<a href="#" id='opener_guid'>...</a>
<script>$('#opener_guid').click(function() {
    openDialog('Dummy!');
    return false;
});</script>

$( "#opener_guid" ).click(function(e) {
 e.preventDefault();
 // your code
});

<a href='#' id='opener_guid' > Click here to load jquery message box</a>

$('#opener_guid').click(function(e) {
  e.preventDefault();
  //Do other stuff.
});

<button id="opener_guid" type="button">Click here to load jquery message box</button>

button#opener_guid {border:0;background:none;text-decoration:underline;cursor:pointer;}

$(function() {
    $( "#opener_guid" )
        .button()
        .click(function() {
        $( "#dialog-form" ).dialog( "open" );
    });
});

#opener_guid {
    cursor:pointer;
}