制作这样的按钮(javascript)的最佳方法是什么?正确的标签是什么? “a”、“b”或任何其他标签?
示例 - http://jsfiddle.net/S7FPH/
或
<html>
<head>
<style type="text/css">
a.a_button, b.b_button {
margin: 10px;
background-color: green;
width: 100px; height: 20px;
text-align: center;
display: block;
color: yellow;
}
a.a_button {text-decoration: none;}
b.b_button{
cursor: pointer;
font-weight: 100;
}
</style>
<script type="text/javascript">
function test(){
alert("test");
}
</script>
</head>
<body>
<a class="a_button" href="" onclick="test(); return false;">click</a>
<b class="b_button" onclick="test();">click</b>
</body>
</html>
更新:
人们问这取决于我想如何使用它,所以这里有一个例子。
关于“按钮”标签 - 是否有一种方法可以使“按钮”标签看起来与我的示例(设计)相似? 关于“ul”——我喜欢它,但我不知道如何以这种方式定位它。
最佳答案
- 一个链接 (
<a href="fallback">…</a>
),如果 JS 不起作用,您可以退回到常规链接 - 一个提交按钮(
<input type="submit">
或<button type="submit">…</button>
),如果 JS 不起作用,您可以回退到表单提交 - 一个基本按钮使用 JavaScript 插入到 DOM 中(
<input type="button">
或<button type="button">…</button>
)如果没有可用的合理后备。
您的简化示例与您的实际用例相去甚远,无法判断以上哪一项适用于此护理。
请注意,以上所有内容均可免费获得焦点。使用未设计为与之交互的元素需要使用 tabindex
添加可聚焦性(某些较旧的浏览器不支持)并且没有可聚焦性,您只能使用定点设备(例如鼠标)而不是线性输入设备(例如键盘)与它们交互。
不要使用粗体元素。那将是无稽之谈。
People asked it depends on how i want to use it, so here is an example.
这可以简单地回退到链接。您还应该使用 pushState这样您就不会破坏书签。
about "button" tag - is thear is a way to make "button" tag look similar to my example(design) ?
只需更改 background-colour
s 和 border-style
about "ul" - i like it but i dunno how to position it this way
float
s,或 display: inline-block
,结合明智margin
够了width
以确保您每行获得两个元素。
关于javascript - 我应该为这样的 javascript 按钮使用什么标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8969499/