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

标签 javascript html css

制作这样的按钮(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>

更新:

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

关于“按钮”标签 - 是否有一种方法可以使“按钮”标签看起来与我的示例(设计)相似? 关于“ul”——我喜欢它,但我不知道如何以这种方式定位它。

最佳答案

Unobtrusive JavaScript并使用:

  • 一个链接 ( <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/

相关文章:

javascript - 使用 grunt 连接所有 vendor 的 javascript 文件?

html - 'en-EU' 是 HTML 'lang' 属性的有效值吗?

javascript - - 不确定如何组合,现在我在它们之间加上逗号

javascript - 当 body 可以相对定位时,如何计算 dom 元素的页面位置?

css - if (viewportwidth >= elementwidth) 在 CSS 中?

javascript - NodeJS - 将 event.headers 转换为小写以用于 AWS

javascript - 我调用函数位错误通知函数不是函数

javascript - 将对象文字插入数组

html - 为什么 &lt;input type ="number"maxlength ="3"> 在 Safari 中不起作用?

javascript - 如何使用 Jquery 如何更改 aria-expanded ="false"dom 元素的一部分(Bootstrap)?