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

时间:2013-07-05 18:33:53

标签: javascript jquery

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

6 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

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

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

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

重定向到其他html页面

答案 2 :(得分: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>");
}

或者你喜欢的任何东西。

答案 3 :(得分:0)

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

答案 4 :(得分:0)

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

获取html

答案 5 :(得分:0)

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

http://jsfiddle.net/TpmTt/

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

检查并重定向用户