5

我一直在研究和学习越来越多的关于 HTML 5、JQuery、CSS3 以及在禁用或不禁用 JavaScript 时隐藏和禁用某些元素的能力。（<noscript>标签）

我的问题是，

  1. 仅当禁用 JavaScript时，如何使超链接有效？
  2. 如果JavaScript 已启用，我如何确保我的下拉登录菜单显示 INSTEAD of following the hyperlink？

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 所做的那样）

关于我的问题的任何问题（希望我没有含糊不清？）问！

4

3 回答 3

3

仅当禁用 JavaScript 时，如何使超链接有效？如果启用了 JavaScript，如何确保我的下拉登录菜单显示 INSTEAD of following the hyperlink？

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

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

调用preventDefault()事件对象。

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

<noscript>标签

一个问题几乎总是有最坏的解决方案。是进步的和不引人注目的。

于 2012-10-19T16:09:29.257 回答
-1

您可以显示链接，如果启用了 javascript，请将其隐藏。

于 2012-10-19T16:10:37.167 回答
-1

您可以将链接放在 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
    });
}
于 2012-10-19T16:15:28.073 回答