1

我有一个登录按钮，它是一个链接。当我单击它时，它会向下滑动一个包含登录表单的小窗口。

现在，我想做的是，如果浏览器不支持 javascript 代码（JS 离线），那么它将转到链接。

我需要找到一种方法来禁用单击时该按钮 ID 的链接，JS 会这样做，当 JS 关闭时，它会像往常一样通过。

这是我的代码：

    $(document).ready(function() {  
        $("#loginToggler").click(function() {
            setTimeout(function() {
                $("#login_block").slideToggle("slow");
            }, 100);
        });
        $("#closeLogin").click(function() {
            $("#login_block").slideUp("fast");
        });
    });

            <li id="last-child"><a href="#"><div id="login"></div></a></li>

我能做些什么来做到这一点？

4

3 回答 3

2
  1. 使登录成为普通的超链接
  2. 在您的 JQuery 中，更改超链接的 href 属性，使其不再链接到任何内容
  3. 添加滑出功能

您可以使用 .attr 函数使其不再直接链接到 javascript 中的登录页面。所以它会像......

<li id="last-child"><a href="loginpageurl" id="loginbutton"><div id="login"></div></a></li>

$(document).ready(function() {  
    $("#loginbutton").attr("href","#");
    $("#loginToggler").click(function() {
        setTimeout(function() {
            $("#login_block").slideToggle("slow");
        }, 100);
    });
    $("#closeLogin").click(function() {
        $("#login_block").slideUp("fast");
    });
});

酌情调整标识符。

因此，如果没有 javascript，它将表现得像一个普通的链接。当有时，链接将无处可去，并且将启用滑出功能。

于 2013-07-12T14:10:30.017 回答
1

将实际链接放入href=""并添加onclick="return false;"到a标签中。

IE：

<li id="last-child"><a href="/login.php" onclick="return false;"><div id="login"></div></a></li>

如果启用了 JavaScript，“return false”会告诉浏览器不要跟随链接。如果 JavaScript 未启用，“onclick”事件将不会触发，“return false”无效。

于 2013-07-12T14:08:55.533 回答
0

您可以使用e.preventDefault()并将登录链接的 href 转到登录页面。

如果启用了 javascript：

用户单击 login_block 将向下滑动的链接，然后调用 e.preventDefault() 以防止使用 href 位置。

如果 javascript 被禁用：

将使用 href 位置，并将用户带到登录页面。

$(document).ready(function() {  
     $("#loginToggler").click(function() {
          $("#login_block").slideToggle("slow");
          e.preventDefault();
     });
     $("#closeLogin").click(function() {
          $("#login_block").slideUp("fast");
     });
});

<li id="last-child">
     <a href="http://www.Somesite.com/Login">
          <div id="login"></div>
     </a>
</li>
于 2013-07-12T14:19:03.713 回答