Javascript jQuery：通过单击按钮导航到另一个页面_Javascript_Jquery_Html_Switch Statement

Javascript jQuery：通过单击按钮导航到另一个页面

javascript jquery html

Javascript jQuery：通过单击按钮导航到另一个页面,javascript,jquery,html,switch-statement,Javascript,Jquery,Html,Switch Statement,我正在学习JavaScript和jQuery。我正在尝试构建一个简单的网页，其中的按钮通过switch-case语句单击后导航到另一个页面我已经在我的.html文件中添加了一个本地jQuery脚本，但是当我单击按钮时，似乎什么都没有发生演示可以在这里找到： html代码是： <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

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

我已经在我的.html文件中添加了一个本地jQuery脚本，但是当我单击按钮时，似乎什么都没有发生

演示可以在这里找到：

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>


$（“输入[type='button']）。单击（函数（）{
开关（this.id）{
案例“x”：
window.location.href=”http://google.com"; 
打破
案例“y”：
window.location.href=”http://yahoo.com"; 
打破
案例“z”：
window.location.href=”http://stackoverflow.com"; 
打破
}
});

它在小提琴上很好用。我能想到的唯一问题是将代码包装在

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

它拉小提琴很好用。我能想到的唯一问题是将代码包装在

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

你真的在你的机器上或者只是在JSFIDLE上试过吗？恐怕您无法在JSFIDDLE中重定向它似乎工作正常，fiddle trows错误

拒绝显示'http://stackoverflow.com/'在帧中，因为它将'X-frame-Options'设置为'SAMEORIGIN'。

当然我已经在我的机器上尝试过了。什么也没发生：/i我如何才能确保jquery库正确加载到浏览器？它在JSFIDLE中不起作用，但当您在控制台中查看时，您会发现：X-Frame-Options拒绝加载：不允许跨原点帧。使用纯旧的

有什么问题吗？您是否确实在您的机器中尝试过这一点什么是桥？恐怕您无法在JSFIDDLE中重定向它似乎工作正常，fiddle trows错误

拒绝显示'http://stackoverflow.com/'在帧中，因为它将'X-frame-Options'设置为'SAMEORIGIN'。

当然我已经在我的机器上尝试过了。什么也没发生：/i我如何才能确保jquery库正确加载到浏览器中？它在JSFIDLE中不起作用，但当您在控制台中查看时，您会发现：加载被X-Frame-Options拒绝：不允许跨原点帧。使用纯旧的

有什么错？它可以工作！谢谢你能详细解释一下为什么我需要将代码包装在一个ready语句中吗？@AlexTal你需要确保te脚本在按钮创建之后执行，如果脚本在此之前执行，那么显然它不会工作：）它起作用了！谢谢你能详细解释一下为什么我需要将代码包装在一个ready语句中吗？@AlexTal你需要确保te脚本在按钮创建之后执行，如果脚本在此之前执行，那么显然它不会工作：）