javascript中的onclick重定向到新页面
[英]Redirect to new page on button onclick in javascript
问题描述
I have many buttons inside of webpage like this. 
我在网页中有很多这样的按钮。
<div class="btn btn-sm btn-success mycustom_btn" onClick="javascript:clickinner();">more</div>
<div class="btn btn-sm btn-success mycustom_btn1" onClick="javascript:clickinner();">more</div>
<div class="btn btn-sm btn-success mycustom_btn2" onClick="javascript:clickinner();">more</div>
What i am trying to do is call function clickinner() on button onclick event. 我想做的是在按钮onclick事件上调用函数clickinner（）。 I tried to grab the button element by class name and change the target url. 我试图按类名称获取button元素并更改目标url。 The javascript code is as follows. javascript代码如下。
<script>
function clickinner(){
var mybtn=document.getElementsByClassName('btn');
mybtn.onClick="location.href='about-us.html'";
};
</script>
I don'twant to grab the element by Id so that i have to assign unique id each time. 我不想通过ID来获取元素，因此每次都必须分配唯一的ID。 However whenever i click on any of buttons, the target link is not working. 但是，每当我单击任何按钮时，目标链接都无法正常工作。 Please help me. 请帮我。
4 个解决方案
解决方案1
1 已采纳 2015-02-13 10:50:16
The clicked button can be accessed by using this in the clickinner function, no need to get it by class name: 可以在clickinner函数中使用this按钮来访问clicked按钮，而无需通过类名来获取它：
<div class="btn btn-sm btn-success mycustom_btn" onClick="javascript:clickinner(this);">more</div>
<div class="btn btn-sm btn-success mycustom_btn1" onClick="javascript:clickinner(this);">more</div>
<div class="btn btn-sm btn-success mycustom_btn2" onClick="javascript:clickinner(this);">more</div>
Furthermore, you can just directly redirect to the 'about-us' page, since you're already in the click event. 此外，由于您已经处于click事件中，因此您可以直接重定向到“关于我们”页面。 So ... 所以...
<script>
function clickinner(target) { // Target refers to the clicked element
location.href='about-us.html';
};
</script>
... is enough. ... 足够。
If you need to go to different pages based on which class the button has, you can do something like: 如果您需要根据按钮的类别进入不同的页面，可以执行以下操作：
function clickinner(target) {
if(target.classList.contains('mycustom_btn')) {
location.href = 'another-page.html';
} else {
location.href='about-us.html';
}
};
解决方案2
0 2015-02-13 10:52:40
Add this as parameter to your function and change the location correctly this作为参数添加到函数中并正确更改位置
<div class="btn btn-sm btn-success mycustom_btn" onClick="javascript:clickinner(this);">more</div>
<div class="btn btn-sm btn-success mycustom_btn1" onClick="javascript:clickinner(this);">more</div>
<div class="btn btn-sm btn-success mycustom_btn2" onClick="javascript:clickinner(this);">more</div>
<script>
function clickinner(mybtn){
// Do your stuff here with the clicked button
location.href='about-us.html';
};
</script>
解决方案3
0 2015-02-13 11:06:13
Working fiddle solution 工作提琴解决方案
HTML: HTML：
<div id="button">more</div>
<div class="btn btn-sm btn-success mycustom_btn">more</div>
<div class="btn btn-sm btn-success mycustom_btn">more</div>
<div class="btn btn-sm btn-success mycustom_btn">more</div>
JS: JS：
var button = document.getElementById('button');
button.addEventListener('click', function(){
alert('only 1 button clicked');
window.location = 'about-us.html';
});
var buttons = document.querySelectorAll('.btn');
for(var i = 0; i < buttons.length; i++){
buttons[i].addEventListener('click', function(){
alert('each button clicked');
window.location = 'about-us.html';
});
}
解决方案4
0 2015-02-13 11:07:18
Try this sample 试试这个样本
<html>
<head>
<meta charset="UTF-8">
<title>First Page</title>
<script>
function clickinner() {
window.location.href = 'secondPage.html';
}
</script>
</head>
<body>
<div class="btn btn-sm btn-success mycustom_btn"
onClick="javascript:clickinner()">more</div>
<div class="btn btn-sm btn-success mycustom_btn1"
onClick="javascript:clickinner();">more</div>
<div class="btn btn-sm btn-success mycustom_btn2"
onClick="javascript:clickinner();">more</div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.