0

我想在按钮单击时加载不同的 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 页面。我怎样才能做到这一点 ？谢谢

4

6 回答 6

1

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

window.location = 'http://your.url.com'
于 2013-07-05T18:39:28.640 回答
0

您可以使用 AJAX 将新的 HTML 加载到您的页面中。您可以拥有一组 HTML 页面并将其加载到您的页面中。

于 2013-07-05T18:41:23.307 回答
0

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

于 2013-07-05T18:41:40.383 回答
0

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

http://jsfiddle.net/TpmTt/

然后，您可以使用window.location、window.navigate检查并重定向用户

于 2013-07-05T18:42:58.423 回答
0

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

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

您可以向该函数发送字符串或其他内容以确定单击了哪个按钮。您调用的函数可以通过使用重定向到不同的 html 页面window.location

于 2013-07-05T18:38:38.870 回答
0

现在您有了值，您可以添加逻辑，例如：

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

或任何你喜欢的。

于 2013-07-05T18:38:58.403 回答