<ul><li onmouseover="a3()">1</li><li onmouseover="a1()">2</li><li onmouseover="a2()">3</li></div><script type="text/javascript">window.onload=function(){ var y1=document.getElementById("1"); var y2=document.getElementById("2"); var y3=document.getElementById("3"); function a1(){ y1.className="show"; y2.className="hid"; y3.className="hid"; } function a2(){ y1.className="hid"; y2.className="show"; y3.className="hid"; } function a3(){ y1.className="hid"; y2.className="hid"; y3.className="show"; }}</script></ul><div class="show" id="1"> <ul> <li>275万购昌平邻铁三居 总价20万买一居</li> <li> 200万内购五环三居 140万安家东三环</li> <li>北京首现零首付楼盘 53万购东5环50平</li> <li> 京楼盘直降5000 中信府 公园楼王现房</li></ul></div><div class="hid" id="2"> <ul> <li> 40平出租屋大改造 美少女的混搭小窝</li> <li> 经典清新简欧爱家 90平老房焕发新生</li> <li> 新中式的酷色温情 66平撞色活泼家居</li> <li> 瓷砖就像选好老婆 卫生间烟道的设计</li> </ul></div><div class="hid" id="3"><ul> <li> 40平出租屋大改造 美少女的混搭小窝</li> <li>经典清新简欧爱家 90平老房焕发新生</li> <li> 新中式的酷色温情 66平撞色活泼家居</li> <li> 瓷砖就像选好老婆 卫生间烟道的设计</li> </ul></div></div></body></html>我感觉这个逻辑应该没有错啊，为什么没有效果，css代码我没有贴出来
1 回答
已采纳
李晓健
TA贡献1036条经验 获得超461个赞
因为你的a1,a2,a3三个方法是写在onload方法内部的，外机是访问不到的。你可以试试
方法1
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8"/>
<title>javascript</title>
<style type="text/css">
.show {
display: block;
}
.hid {
display: none;
}
</style>
</head>
<body>
<ul>
<li id="nav1">1</li>
<li id="nav2">2</li>
<li id="nav3">3</li>
<script type="text/javascript">
window.onload = function () {
var y1 = document.getElementById("1");
var y2 = document.getElementById("2");
var y3 = document.getElementById("3");
function a1() {
y1.className = "show";
y2.className = "hid";
y3.className = "hid";
}
function a2() {
y1.className = "hid";
y2.className = "show";
y3.className = "hid";
}
function a3() {
y1.className = "hid";
y2.className = "hid";
y3.className = "show";
}
document.getElementById('nav1').onmouseover = a1;
document.getElementById('nav2').onmouseover = a2;
document.getElementById('nav3').onmouseover = a3;
}
</script>
</ul>
<div class="show" id="1">
<ul>
<li>
275万购昌平邻铁三居 总价20万买一居
</li>
<li>
200万内购五环三居 140万安家东三环
</li>
<li>
北京首现零首付楼盘 53万购东5环50平
</li>
<li>
京楼盘直降5000 中信府 公园楼王现房
</li>
</ul>
</div>
<div class="hid" id="2">
<ul>
<li> 40平出租屋大改造 美少女的混搭小窝</li>
<li> 经典清新简欧爱家 90平老房焕发新生</li>
<li> 新中式的酷色温情 66平撞色活泼家居</li>
<li> 瓷砖就像选好老婆 卫生间烟道的设计</li>
</ul>
</div>
<div class="hid" id="3">
<ul>
<li> 140平出租屋大改造 美少女的混搭小窝</li>
<li>经典清新简欧爱家 90平老房焕发新生</li>
<li> 新中式的酷色温情 66平撞色活泼家居</li>
<li> 瓷砖就像选好老婆 卫生间烟道的设计</li>
</ul>
</div>
</body>
</html>方法2
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8"/>
<title>javascript</title>
<style type="text/css">
.show {
display: block;
}
.hid {
display: none;
}
</style>
</head>
<body>
<ul>
<li onmouseover="a3()">1</li>
<li onmouseover="a1()">2</li>
<li onmouseover="a2()">3</li>
<script type="text/javascript">
window.onload = function () {
var y1 = document.getElementById("1");
var y2 = document.getElementById("2");
var y3 = document.getElementById("3");
function a1() {
y1.className = "show";
y2.className = "hid";
y3.className = "hid";
}
function a2() {
y1.className = "hid";
y2.className = "show";
y3.className = "hid";
}
function a3() {
y1.className = "hid";
y2.className = "hid";
y3.className = "show";
}
//以下几行把方法暴露到外面去
window.a1 = a1;
window.a2 = a2;
window.a3 = a3;
}
</script>
</ul>
<div class="show" id="1">
<ul>
<li>
275万购昌平邻铁三居 总价20万买一居
</li>
<li>
200万内购五环三居 140万安家东三环
</li>
<li>
北京首现零首付楼盘 53万购东5环50平
</li>
<li>
京楼盘直降5000 中信府 公园楼王现房
</li>
</ul>
</div>
<div class="hid" id="2">
<ul>
<li> 40平出租屋大改造 美少女的混搭小窝</li>
<li> 经典清新简欧爱家 90平老房焕发新生</li>
<li> 新中式的酷色温情 66平撞色活泼家居</li>
<li> 瓷砖就像选好老婆 卫生间烟道的设计</li>
</ul>
</div>
<div class="hid" id="3">
<ul>
<li> 40平出租屋大改造 美少女的混搭小窝</li>
<li>经典清新简欧爱家 90平老房焕发新生</li>
<li> 新中式的酷色温情 66平撞色活泼家居</li>
<li> 瓷砖就像选好老婆 卫生间烟道的设计</li>
</ul>
</div>
</body>
</html>方法3
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8"/>
<title>javascript</title>
<style type="text/css">
.show {
display: block;
}
.hid {
display: none;
}
</style>
</head>
<body>
<ul>
<li onmouseover="a3()">1</li>
<li onmouseover="a1()">2</li>
<li onmouseover="a2()">3</li>
</ul>
<div class="show" id="1">
<ul>
<li>
275万购昌平邻铁三居 总价20万买一居
</li>
<li>
200万内购五环三居 140万安家东三环
</li>
<li>
北京首现零首付楼盘 53万购东5环50平
</li>
<li>
京楼盘直降5000 中信府 公园楼王现房
</li>
</ul>
</div>
<div class="hid" id="2">
<ul>
<li> 40平出租屋大改造 美少女的混搭小窝</li>
<li> 经典清新简欧爱家 90平老房焕发新生</li>
<li> 新中式的酷色温情 66平撞色活泼家居</li>
<li> 瓷砖就像选好老婆 卫生间烟道的设计</li>
</ul>
</div>
<div class="hid" id="3">
<ul>
<li> 40平出租屋大改造 美少女的混搭小窝</li>
<li>经典清新简欧爱家 90平老房焕发新生</li>
<li> 新中式的酷色温情 66平撞色活泼家居</li>
<li> 瓷砖就像选好老婆 卫生间烟道的设计</li>
</ul>
</div>
<!--把js放到最后 不要用onload 方法-->
<script type="text/javascript">
var y1 = document.getElementById("1");
var y2 = document.getElementById("2");
var y3 = document.getElementById("3");
function a1() {
y1.className = "show";
y2.className = "hid";
y3.className = "hid";
}
function a2() {
y1.className = "hid";
y2.className = "show";
y3.className = "hid";
}
function a3() {
y1.className = "hid";
y2.className = "hid";
y3.className = "show";
}
</script>
</body>
</html>添加回答
举报
0/150
提交
取消