Question

我正在尝试制作一个指向链接的按钮。所以我有当前代码：

onEvent("button27", "click", function() {
/* stuff for a link goes here */
});

我该怎么做？我在想类似的东西

setURL("id");

但是我不确定。感谢您的帮助！

Answer 1

有几种方法可以解决这个问题。

使用自定义事件处理程序。

<button type="button" id="button27">Go to website</button>

// Create the redirect handler
function handleRedirect(){
    window.location = "your website here";
}

// Make sure the DOM content is loaded
document.addEventListener("DOMContentLoaded", function(event) {
    const btn = document.getElementById("button27");

    // Create a custom event listener
    btn.addEventListener("click", handleRedirect, false);
});

加载页面后，Javascript将监听ID为button27的按钮上的点击事件。然后触发重定向处理程序。

使用功能。

<button type="button" id="button27" onclick="setURL('your website here');">Go to website</button>

// Create the setURL function
function setURL(url){
    window.location = url;
}

这使您有了更多控制权，因为您可以重复使用多个按钮的功能。尽管当然可以使用自定义事件处理程序，尽管可能有些棘手。

将锚链接的样式设置为按钮。

.anchorBtn {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
	background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%);
	background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%);
	background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%);
	background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%);
	background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0);
	background-color:#33bdef;
	border:1px solid #057fd0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px -1px 0px #5b6178;
}
.anchorBtn:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #019ad2), color-stop(1, #33bdef));
	background:-moz-linear-gradient(top, #019ad2 5%, #33bdef 100%);
	background:-webkit-linear-gradient(top, #019ad2 5%, #33bdef 100%);
	background:-o-linear-gradient(top, #019ad2 5%, #33bdef 100%);
	background:-ms-linear-gradient(top, #019ad2 5%, #33bdef 100%);
	background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#019ad2', endColorstr='#33bdef',GradientType=0);
	background-color:#019ad2;
}
.anchorBtn:active {
	position:relative;
	top:1px;
}

<a href="your website here" class="anchorBtn">Go to website</a>

最后一个解决方案完全不需要Javascript，CSS类可在其他按钮上重复使用。

如何使按钮转到链接

1 个答案: