三个页面在同一个html页上，其中有3个选择按钮，每选择其中一个，都会跳转到相应页面里!急！

<input type="radio" name="1">

<input type="radio" name="2">
<input type="radio" name="3">
<div>第一个页面</div>
<div>第二个页面</div>
<div>第三个页面</div>

举报该问题

推荐答案推荐于2018-05-17

方法一：绑定数据在dom元素上。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<script>
   window.onload = function() {
       var rs = document.getElementsByName('r');
       var divs = document.getElementsByTagName('div');
       var index = 0;
       for (var i = 0; i < rs.length; i++) {
           rs[i]._index = i;
           rs[i].onclick = function() {
                divs[index].style.display = "none";
                divs[this._index].style.display = "block";
                index = this._index;
           };
       }

       rs[index].checked = true;
       divs[index].style.display = "block";
   };
</script>
</head>
<body>
    <input type="radio" name="r">
    <input type="radio" name="r">
    <input type="radio" name="r">
    <div>第一个页面</div>
    <div>第二个页面</div>
    <div>第三个页面</div>
</body>
</html>

------------------------------------------------------------------------------
方法二：闭包

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<script>
    window.onload = function ()
    {
        var rs = document.getElementsByName('r');
        var divs = document.getElementsByTagName('div');
        var index = 0;
        var anonymous = function (i)
        {
            rs[i].onclick = function ()
            {
                divs[index].style.display = "none";
                divs[i].style.display = "block";
                index = i;
            };
        };

        for ( var i = 0; i < rs.length; i++)
        {
            anonymous (i);
        }
        rs[index].checked = true;
        divs[index].style.display = "block";
    };
</script>
</head>
<body>
    <input type="radio" name="r">
    <input type="radio" name="r">
    <input type="radio" name="r">
    <div>第一个页面</div>
    <div>第二个页面</div>
    <div>第三个页面</div>
</body>
</html>
------------------------------------------------------------------------
方法三：使用 let 关键字声明
浏览器及最低版本支持
Chrome          Firefox (Gecko)   Internet Explorer       Opera
  41.0               2.0 (1.8.1) [1]          11                     17

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<script>
    window.onload = function ()
    {
        // Block-scoped declarations (let, const, function, class)
        //not yet supported outside strict mode
        "use strict";
        var rs = document.querySelectorAll ('input[type=radio]');
        var divs = document.querySelectorAll("div");
        var index = 0;
        for ( var i = 0; i < rs.length; i++)
        {
            let j = i;
            rs[i].onclick = function ()
            {
                divs[index].style.display = "none";
                divs[j].style.display = "block";
                index = j;
            };
        }
        rs[index].checked = true;
        divs[index].style.display = "block";
    };
</script>
</head>
<body>
    <input type="radio" name="r">
    <input type="radio" name="r">
    <input type="radio" name="r">
    <div>第一个页面</div>
    <div>第二个页面</div>
    <div>第三个页面</div>
</body>
</html>

温馨提示：答案为网友推荐，仅供参考

当前网址：http://55.wendadaohang.com/zd/cGLGecFQ4FF8ecQQ8c.html

其他回答

第1个回答 2015-08-28

12 3

追答

你追问的是什么意思？没看明白

本回答被网友采纳

相似回答

在用HTML写网页的时候,要求选中一个复选框,会跳到另一个页面,应该怎么...答：用ASP.NET的时候可以用复选框的事件来做 ,然后用Reponse.Redirect来转...

在html中怎样实现按下一个按钮后跳转到另一页面?答：1、你给form添加一个action,里面放文件的相对路径。当submit按钮点击的时候自然会跳转到action指定的页面。2、或者给submit绑定onclick事件，点击通过window.open或者window.location.href跳转。

html如何实现点击按钮跳转页面答：1、首先，我们新建一个带有button按钮的页面，在Dreamweaver中打开这个页面。2、button按钮不能直接添加herf属性，我们可以通过button的onClick事件来实现页面的跳转。3、可以直接在onclick事件上添加动作实现页面跳转，也可以让onC...

两个页面在同一个html页上,点击其中第一个页面的按钮可以跳转到其中第二...答：true); divStyle('div2',false);}function prePage(){ divStyle('div1',false); divStyle('div2',true);}</script><div id='div1'>第一个页面 <button type="button" onclick='nextPage()'>下一页</...

比如说现在我有一个index.html页,和3个小的子页面1.html,2.html和3...答：首先你要把1.html，2.html和3.html在index.html的iframe中显示，然后在3个子页面的1，2，3按钮加上相同的URL，按钮1的URL为1.html，按钮2的URL为2.html，按钮3的URL为3.html，这样就OK了 ...

大家正在搜

html跳转到指定页面 html页面跳转 html跳转网页代码三个html静态网页三秒后跳转html html页面 html登录页面 html跳转简单的html登录页面