单击按钮加载不同的html页面
[英]Load different html page on button click
问题描述
I want to load different html page at button click Here is my main page code 
我想在按钮单击时加载不同的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>© 2013 by Han Chang</li>
</ul>
</div>
<div id="footer-row-2">
</div>
</footer>
</div>
</body>
my home.js code as below 我的home.js代码如下
$(function () {
$("#radio").buttonset();
$("#radio :radio").click(function (e) {
var $val = $("#" + $(this).attr("for")).val();
alert($val);
});
I want to know which button I choose, then load its html page. 我想知道我选择哪个按钮，然后加载其html页面。 How can I do this ? 我怎样才能做到这一点 ？ Thank you 谢谢
6 个解决方案
解决方案1
1 2013-07-05 18:39:28
You can use window.location. 您可以使用window.location。 Assuming the input/anchor/button has the context to create the desired url. 假设输入/锚定/按钮具有创建所需URL的上下文。
window.location = 'http://your.url.com'
解决方案2
0 2013-07-05 18:38:38
Use the onclick event for each button to call a js function. 对每个按钮使用onclick事件来调用js函数。
<input type="radio" id="navmenu1" name="radio" onclick="someFunction()"><label for="navmenu1">Home</label>
You could send in a string or something to that function to determine which button was clicked. 您可以向该函数发送字符串或其他内容来确定单击了哪个按钮。 The function that you call can redirect to a different html page by using window.location 您调用的函数可以通过使用window.location重定向到其他html页面
解决方案3
0 2013-07-05 18:38:58
Now that you have the value, you can add the logic, for example: 现在有了值，您可以添加逻辑，例如：
if (val === "Option 1") {
// Action here
}
It sounds like you want to change some content on the page, which is a simple JQuery function: 听起来您想更改页面上的某些内容，这是一个简单的JQuery函数：
$("body").replaceWith(//HTML here);
More info on that function: http://api.jquery.com/replaceWith/ 有关该功能的更多信息： http : //api.jquery.com/replaceWith/
So the complete example would be something like: 因此，完整的示例如下所示：
if (val === "Option 1") {
$("body).replaceWith("<body><h2>Option 1</h2></body>");
}
or whatever you fancy. 或任何你喜欢的。
解决方案4
0 2013-07-05 18:41:23
You can load new HTML into your page using AJAX. 您可以使用AJAX将新的HTML加载到页面中。 You could have a set page of HTML and load it into your page. 您可以具有一组HTML页面并将其加载到页面中。
解决方案5
0 2013-07-05 18:41:40
您可以使用jquery模板插件或通过jquery和httphandler获取html
解决方案6
0 2013-07-05 18:42:58
To get the value of the radio button, you need to have a value attribute. 要获取单选按钮的值，您需要具有一个value属性。
http://jsfiddle.net/TpmTt/ http://jsfiddle.net/TpmTt/
then, you can check and redirect the user using window.location, window.navigate 然后，您可以使用window.location，window.navigate检查并重定向用户
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.