Question

制作这样的按钮（javascript）的最佳方法是什么？正确的标签是什么？ “a”，“b”或任何其他标签？

或

<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>

更新：

Thats how it should look 人们问这取决于我想如何使用它，所以这是一个例子。

关于“按钮”标签 - thear是一种让“按钮”标签看起来与我的例子（设计）类似的方法吗？关于“ul” - 我喜欢它，但我不知道如何以这种方式定位。

Answer 1

撰写Unobtrusive JavaScript并使用：

链接（<a href="fallback">…</a>）如果JS无法正常工作则可以回退到常规链接
提交按钮（<input type="submit">或<button type="submit">…</button>）如果JS无法正常工作则可以退回到表单提交
如果没有合理的后备可用，则使用JavaScript （<input type="button">或<button type="button">…</button>）将基本按钮插入到DOM中。

您的简化示例与您的实际用例无关，无法说明上述哪一项适用于此护理。

请注意，以上所有内容都是免费的。使用非设计与之交互的元素需要使用tabindex（某些旧版浏览器不支持）添加可聚焦性，并且没有可聚焦性，您只能使用定位设备（如鼠标）与它们进行交互而不是线性输入设备（如键盘）。

不要使用粗体元素。那是无稽之谈。


人们问这取决于我想如何使用它，所以这是一个例子。

这可以简单地回归到链接。您还应该使用pushState，这样就不会破坏书签。


关于“按钮”标签 - thear是一种让“按钮”标签看起来与我的例子（设计）类似的方法吗？

只需更改background-colour和border-style s。


关于“ul” - 我喜欢它，但我不知道如何以这种方式定位

float或display: inline-block，与明智的margin和width相结合，确保每行都能获得两个项目。

Answer 2

您的按钮是一个锚点，因此请使用<a></a>标记。

W3C建议是对表单中的每个按钮使用<input>标记。

Tag Input

Answer 3

这是一个纯粹主义者的问题。

我更喜欢 a ，因为你可以免费获得光标，但是你需要在onclick中返回false以不重新加载页面。

在这两种情况下，您都可以在head onload中分配onclick而不是inline

如果您需要一个按钮，还有输入标签和按钮标签也可以完成这项工作

Answer 4

如果不知道按钮应该做什么以及在哪种情况下，就不可能给出肯定答案。这个例子太抽象了。

但是a和b很可能是错误的，不是语法上的，而是语义上的。使用span，可能使用class属性会更好。

是否有理由不使用button元素，如果这些元素应该是基于JavaScript的按钮而不是其他内容？

Answer 5

如果您正在寻找接受用户输入的元素，而不导航到新网址，则应该使用button代码。

Answer 6

我建议a个标记带有有意义的href属性。比如：

<ul id="nav">
  <li><a href="#first">First</a></li>
  <li><a href="#previous">Previous</a></li>
  <li><a href="#next">Next</a></li>
  <li><a href="#last">Last</a></li>
</ul>

这样，用户可以将鼠标悬停在元素上，并了解点击它将执行的操作。请注意，即使您在CSS中隐藏文本也是如此，如果使用背景图像，您可能希望这样做。当然，您需要禁止默认的浏览器操作，以避免在地址栏中出现“#first”，并让浏览器查找id为“first”的元素并跳转到它。

使用a标记的另一个好处是，启用了键盘导航的用户可以从一个标签到另一个标签（因此不要忘记在样式表中包含:focus规则）。

我应该为这样的javascript按钮使用什么标签？

6 个答案: