如果JavaScript被禁用，如何使超链接仅起作用？

Question

我一直在研究和学习HTML 5、jQuery、CSS3以及当JavaScript启用或禁用时隐藏和禁用某些元素的强大功能（<noscript>标签）。

我的问题是：

1. 如何使超链接仅在JavaScript被禁用时有效？
2. 如果JavaScript被启用，如何确保登录下拉菜单显示而不是跟随超链接？

HTML 很简单，当JS被禁用时，我隐藏了我的购物车区域并更改了登录链接。

<!-- If JavaScript is disabled it will make the login link take you to a login page instead of a drop-down box. -->         
<noscript>
    <style>
        .login-form, .js-enabled{
            display: none;
        }
        .cart{
            top: -80px;
        }
    </style>                                
    <div class="cart">
        <a href="#" id="cart_img">
            <img src="img/bag.jpg" alt="Check Cart"
            onmouseover="this.src='img/bag-gold.jpg'"
            onmouseout="this.src='img/bag.jpg'">
        </a>
        <a href="#">Why HorseTack?</a> | 
        <a href="#">About</a> | 
        <a href="#">Contact</a> | 
        <a href="http://www.LOGINPAGELINK.com">Login</a>
    </div>
</noscript>
<!-- End JavaScript text -->

<div class="cart js-enabled">
    <a href="#" id="cart_img">
        <img src="img/bag.jpg" alt="Check Cart"
        onmouseover="this.src='img/bag-gold.jpg'"
        onmouseout="this.src='img/bag.jpg'">
    </a>
    <a href="#">Why HorseTack?</a> | 
    <a href="#">About</a> | 
    <a href="#">Contact</a> |                           
    <a href="#" class="login-box">Login</a>
        <div class="login-form">
            <form class="login-frm">
                <label><input type="text" placeholder="Username"></label>
                <label><input type="password" placeholder="Password"></label><br>
                <input type="submit" value="Login"><br>
                <a href="#">New User?</a>
            </form>
        </div>
</div>

JQuery

这使得登录框下滑（只有在必要时才将人们带到登录页面，以避免干扰他们）。

    // Login Box Pop-Up
jQuery(document).ready(function() {
    jQuery(".login-form").hide();
    //toggle the componenet with class msg_body
    jQuery(".login-box").click(function()
    {
    jQuery(this).next(".login-form").slideToggle(500);
    });
});

我希望不再需要<noscript>标签和重复内容，只是希望在没有JavaScript时，超链接仍然起作用。

我已经设置了页面，让用户知道他们的JS被禁用了（就像Stack Overflow一样）。

如果对我的问题有任何疑问（希望我没有表述含混），请提出来！

- user1759857

Answer 1

如果JavaScript被禁用，我该如何使超链接仅起作用？如果启用了JavaScript，如何确保我的下拉式登录菜单显示而不是跟随超链接？

编写一个JavaScript函数来显示菜单。确保它捕获第一个参数（这将是事件对象）。

将该函数绑定到链接作为{{link1：事件处理程序}}。

在事件对象上调用{{link2：preventDefault()}}。

function (event) { /* display menu then ... */ event.preventDefault(); }

---

<noscript> 标签

它们几乎总是问题的最差解决方案。要渐进式和不显眼。

- Quentin

---

你忘记了不可避免的“Tad da！” ^_^ - Naftali

那么 event.preventDefault(); 应该放在我的下拉滑动菜单代码的末尾吗？我正在努力理解，也感谢您提供的参考资料，因为这些对我非常有帮助。 - user1759857

NVM明白了。 再次感谢:D - user1759857

Answer 2

您可以将链接放在一个 div 中，如果启用了 JS，则删除链接并将事件放在该 div 上 像这样：

<div class="link-holder">
    <a href="page.html">Link</a>
</div>

还有jQuery：

$(document).ready()
{
    $('.link-holder').text('').click(function(){
        displayLogin();  //assuming displayLogin() has your function to, well, display the login
    });
}

- Roberto Maldonado

---

Div元素不是用来交互设计的。这样做会破坏任何非基于指针的HUI设备（因此对于使用键盘、呼吸开关等，包括大多数依赖屏幕阅读软件的人来说）。 - Quentin

Answer 3

你可以展示链接，如果启用了JavaScript，则将其隐藏。

- MKS

---

如果链接被隐藏，用户将无法点击它来显示菜单。 - Quentin

这是正确的。然而，OP说：“如果JavaScript被禁用，我该如何使超链接仅起作用？” 我理解为只有在禁用javascript时才应显示该链接。因此，我认为除非有一个javascript函数明确隐藏它，否则该链接将是可见的 - 这意味着当javascript被禁用时，该链接是可见和可用的。 - MKS

抱歉，我应该说当JS被禁用时使超链接正常工作，否则显示下拉式登录菜单。对不起！ - user1759857

没关系，我只是试图回答提出的问题 :)。 - MKS