三个页面在同一个html页上，其中有3个选择按钮，每选择其中一个，都会跳转到相应页面里!急！
<inputtype="radio"name="1"><inputtype="radio"name="2"><inputtype="radio"name="3"><div...
<input type="radio" name="1">
<input type="radio" name="2">
<input type="radio" name="3">
<div>第一个页面</div>
<div>第二个页面</div>
<div>第三个页面</div> 展开
<input type="radio" name="2">
<input type="radio" name="3">
<div>第一个页面</div>
<div>第二个页面</div>
<div>第三个页面</div> 展开
2个回答
展开全部
方法一：绑定数据在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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script>
function showHtml(did,total){
for(i=1;i<=total;i++){
document.getElementById("Html_"+i).style.display="none";
}
document.getElementById("Html_"+did).style.display="";
}
</script>
<input type="radio" name="1" value="1" onclick="showHtml(1,3)">
<input type="radio" name="2" value="2" onclick="showHtml(2,3)">
<input type="radio" name="3" value="3" onclick="showHtml(3,3)">
<div style="display:none" id="Html_1">第一个页面</div>
<div style="display:none" id="Html_2">第二个页面</div>
<div style="display:none" id="Html_3">第三个页面</div>
function showHtml(did,total){
for(i=1;i<=total;i++){
document.getElementById("Html_"+i).style.display="none";
}
document.getElementById("Html_"+did).style.display="";
}
</script>
<input type="radio" name="1" value="1" onclick="showHtml(1,3)">
<input type="radio" name="2" value="2" onclick="showHtml(2,3)">
<input type="radio" name="3" value="3" onclick="showHtml(3,3)">
<div style="display:none" id="Html_1">第一个页面</div>
<div style="display:none" id="Html_2">第二个页面</div>
<div style="display:none" id="Html_3">第三个页面</div>
追问
12 3
追答
你追问的 是什么意思？没看明白
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
