Javascript 在单击按钮时加载不同的html页面_Javascript_Jquery

Javascript 在单击按钮时加载不同的html页面

javascript jquery

Javascript 在单击按钮时加载不同的html页面,javascript,jquery,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">

我想在点击按钮时加载不同的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>

我想知道我选择了哪个按钮，然后加载它的html页面。

我该怎么做？谢谢

使用每个按钮的

onclick

事件调用js函数

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

主页

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

窗口重定向到不同的html页面。位置
现在您有了值，可以添加逻辑，例如：
if (val === "Option 1") {
    // Action here
}

听起来您想更改页面上的某些内容，这是一个简单的JQuery函数：
$("body").replaceWith(//HTML here);

有关该功能的更多信息：
因此，完整的示例如下所示：
if (val === "Option 1") {
    $("body).replaceWith("<body><h2>Option 1</h2></body>");
}

if（val==“选项1”）{
$（“正文”）。替换为（“选项1”）；
}

或者您喜欢的任何内容。
您可以使用window.location。假设输入/锚定/按钮具有创建所需url的上下文
window.location = 'http://your.url.com'

您可以使用AJAX将新HTML加载到页面中。您可以设置一个HTML页面并将其加载到页面中。
您可以使用jquery模板插件或通过jquery和httphandler获取HTML
要获取单选按钮的值，您需要有一个值
属性

然后，您可以使用
检查并重定向用户，为什么您要加载不同的HTML页面？似乎您只想在内容区域加载不同的信息。您可以提供有关您试图实现的内容的更多详细信息吗？@Mutant这听起来像是一个动态页面加载，可能用于AJAX查询，不？嗨，Mutant，您是对的，抱歉！！我想加载动态页面我想当我单击按钮时，内容区域显示不同的内容单击每个按钮的事件-这是错误的建议。onclick
的更好兄弟是jQuery的on。如果他有很多按钮怎么办？
window.location = 'http://your.url.com'