Question

我想在按钮点击时加载不同的html页面这是我的主页代码

<body>

<div id="header">    
<div id="radio">
  <input type="radio" id="navmenu1" name="radio"><label for="navmenu1">Home</label>
  <input type="radio" id="navmenu2" name="radio"><label for="navmenu2">Contact</label>
  <input type="radio" id="navmenu3" name="radio"><label for="navmenu3">Resume</label>
</div>

</div><!--head-->

<div id="content-area">
<div id="content"></div>    
</div>

<div id="footer-row">
  <footer>
     <div id="footer-row-1">
        <ul id="footer">
            <li>&copy 2013 by Han Chang</li>
        </ul>
    </div>
    <div id="footer-row-2">        
    </div>
</footer>
</div>

</body>

我的home.js代码如下

$(function () {
$("#radio").buttonset();   
$("#radio :radio").click(function (e) {
    var $val = $("#" + $(this).attr("for")).val();
    alert($val);
});

我想知道我选择哪个按钮，然后加载其html页面。我怎样才能做到这一点？谢谢

Answer 1

您可以使用window.location。假设输入/锚点/按钮具有创建所需URL的上下文。

window.location = 'http://your.url.com'

Answer 2

对每个按钮使用onclick事件来调用js函数。

<input type="radio" id="navmenu1" name="radio" onclick="someFunction()"><label for="navmenu1">Home</label>

您可以向该函数发送字符串或其他内容以确定单击了哪个按钮。您调用的函数可以使用window.location

重定向到其他html页面

Answer 3

现在您已拥有该值，您可以添加逻辑，例如：

if (val === "Option 1") {
    // Action here
}

听起来你想要改变页面上的一些内容，这是一个简单的JQuery函数：

$("body").replaceWith(//HTML here);

有关该功能的更多信息：http://api.jquery.com/replaceWith/

所以完整的例子就像是：

if (val === "Option 1") {
    $("body).replaceWith("<body><h2>Option 1</h2></body>");
}

或者你喜欢的任何东西。

Answer 4

您可以使用AJAX将新HTML加载到您的页面中。您可以设置一个HTML页面并将其加载到您的页面中。

Answer 5

您可以使用jquery模板插件或通过jquery和httphandler

获取html

Answer 6

要获取单选按钮的值，您需要具有value属性。

http://jsfiddle.net/TpmTt/

然后，您可以使用window.location, window.navigate

检查并重定向用户

点击按钮加载不同的html页面

6 个答案: