jQuery:单击按钮导航到另一个页面

时间:2014-03-22 12:15:17

标签: javascript jquery html switch-statement

我正在学习JavaScript和jQuery。我正在尝试构建一个简单的网页,其中的按钮可以通过switch-case语句在单击时导航到另一个页面。

我已经在我的.html文件中添加了一个本地jQuery脚本,但是当我点击按钮时似乎没有发生任何事情。

演示可以在这里找到:http://jsfiddle.net/VmYLy/

html代码是:

<head>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

 $("input[type='button']").click(function() {
     switch(this.id) {
         case 'x':
             window.location.href = "http://google.com"; 
             break;
         case 'y': 
             window.location.href = "http://yahoo.com"; 
             break;
         case 'z': 
             window.location.href = "http://stackoverflow.com"; 
             break;
            }
        });    
</head>

<body>        
    <input type="button" value="google" style="width:120px" id="x"><br>
    <input type="button" value="yahoo" style="width:120px" id="y"><br>
    <input type="button" value="stackoverflow" style="width:120px" id="z"><br>
</body>

1 个答案:

答案 0 :(得分:4)

它适用于小提琴。我能想到的唯一问题是将代码包装在ready()中。由于您选择了onLoad选项,因此这可能不会导致问题。

$(document).ready(function(){
    $("input[type='button']").click(function() {
        switch(this.id) {
            case 'x':window.location.href = "http://google.com"; break;
            case 'y': window.location.href="http://yahoo.com"; break;
            case 'z': window.location.href = "http://stackoverflow.com"; break;
        }
    });
})