我一直在越来越多地研究和学习 HTML 5、jQuery、CSS3,以及在禁用或未禁用 JavaScript 时隐藏和禁用某些元素的功能。 (<noscript>
标签)
我的问题是,
- 如果 JavaScript 被禁用,如何使超链接仅起作用?
- 如果启用了 JavaScript,我如何确保我的下拉登录菜单显示 INSTEAD 超链接?
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 所做的那样)
对我的问题有任何疑问(希望我没有含糊不清?)问!
最佳答案
How do I make a hyperlink ONLY work if JavaScript is DISABLED? If JavaScript is enabled, how do I make sure that my drop-down login menu displays INSTEAD of following the hyperlink?
编写一个 JavaScript 函数来显示菜单。确保它捕获第一个参数(这将是事件对象)。
将函数绑定(bind)到链接为 an event handler .
调用 preventDefault()
在事件对象上。
function (event) { /* display menu then ... */ event.preventDefault(); }
<noscript>
tags
几乎总是有最糟糕的问题解决方案。是 progressive和 unobtrusive .
关于javascript - 使超链接仅在禁用 JavaScript 时有效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12978221/