重定向至javascript中单击按钮的新页面

Redirect to new page on button onclick in javascript

本文关键字：按钮 新页面 单击 javascript 重定向      更新时间：2023-11-07

我在网页里有很多这样的按钮。

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

我想做的是在按钮onclick事件上调用函数clickinner（）。我试图通过类名获取按钮元素并更改目标url。javascript代码如下。

<script>
function clickinner(){
    var mybtn=document.getElementsByClassName('btn');
    mybtn.onClick="location.href='about-us.html'";
};
</script>

我不想按Id获取元素，这样每次都必须分配唯一的Id。然而，每当我点击任何按钮时，目标链接都不起作用。请帮帮我。

点击的按钮可以使用clickinner函数中的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(target) { // Target refers to the clicked element
    location.href='about-us.html';
};
</script>

足够了。

如果你需要根据按钮的类别转到不同的页面，你可以这样做：

function clickinner(target) {
    if(target.classList.contains('mycustom_btn')) {
        location.href = 'another-page.html';
    } else {
        location.href='about-us.html';
    }
};

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

http://jsfiddle.net/asv548g2/

工作小提琴解决方案

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:

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';
    });
}

尝试此示例

 <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>
相关文章：