<title>无标题文档</title>
<style>
.button {
display: inline-block;
padding: 4px 10px;
border: 2px solid #cacaca;
background-color: #eee;
border-radius: 3px;
color: #333;
cursor: pointer;
}
.button:focus { outline: 1px dashed #34538b;}
</style>
</head>
<body>
<span class="button">按钮1</span>
<span class="button" role="button" tabindex="0">按钮2</span>
<span class="button" data-key="true" role="button" tabindex="0">按钮3</span>
<a class="button" href="javascript:">按钮4</a>
<script src="http://img3.douban.com/js/packed_jquery.min6301986802.js"></script>//为什么要放在body内容中,放于head部分没有作用呢。。。
<script>
$(".button").each(function() {
$(this).bind("click", function() {
alert("啊~我被点击了!");
});
if ($(this).attr("data-key")) {
$(this).bind("keydown", function(e) {
var code = e.which;
// 13 = 回车, 32 = 空格
if (code === 13 || code === 32) {
$(this).trigger("click");
}
});
}
});
</script>
</body>