Question

我试图在HTML中单击时为3个按钮创建不同的超链接。我环顾四周，有很多使用JavaScript的例子 - 这会更好吗？为什么？我只希望按钮加载不同的网页。感谢

3个按钮的当前HTML代码：

<div id="buttons">
        <button class="btn">Entry forms</button>
        <button class="btn">Scoresheets</button>
        <button class="btn">Results</button>
</div>

Answer 1

你可以通过简单的方式或艰难的方式来做到这一点。

简单方法

制作链接。提供链接href属性。你在这里的工作已经完成。如果你愿意，你甚至可以将它们设计为看起来像按钮 - 但链接可以在任何版本中跨浏览器工作，有或没有JS。

<a href="yourpage.html" class="btn">Entry forms</a>

这是一个演示：

.btn {
        display: inline-block;
        padding: 5px 10px 5px 10px;
        background: gray;
        background: linear-gradient(rgb(240,240,240), rgb(200,200,200));
        border: 1px solid gray;
        border-radius: 3px;
        color: black;
    }

<a href="yourpage.html" class="btn">Entry forms</a>

艰难的方式

onclick属性：

<button class="btn" onclick="location.href='yourpage.html'">Entry forms</button>

或动态添加侦听器：

document.getElementById("my-button").addEventListener("click", function() {
    location.href = 'yourpage.html';
});

Answer 2

如何快速简便地解决这个问题？

<div id="buttons">
        <button class="btn" onclick="location.href='xxx.html';">Entry forms</button>
        <button class="btn" onclick="location.href='yyy.html';">Scoresheets</button>
        <button class="btn" onclick="location.href='zzz.html';">Results</button>
</div>

关于什么是更好和正确的问题 - 这取决于你点击按钮需要达到的目标。如果在单击按钮时需要运行一些更复杂和更长的代码，那么使用从单击调用并运行代码的函数来执行此操作会更好（并且更易于理解和管理）。

例如：

HTML：

<button id="my_button" class="..." value="..." />

代码：

jQuery("BUTTON#my_button").click(function(){
// run some code here...
});

我希望这能回答你的问题......

Answer 3

试试这个......

<script>
    $('#buttons .btn').click(function(){

    var locHref = '';
        switch($(this).index()){
            case 0:
                locHref = 'EntryForms.com';
            break;
            case 1:
                locHref = 'ScoreSheets.com';
            break;
            case 2:
                locHref = 'Results.com';
            break;
        }
        location.href = locHref;
    });
</script>

在div中的Onclick按钮

3 个答案:

简单方法

艰难的方式