js和html做选项卡的问题
<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代码我没有贴出来
Sprash1回答
-
李晓健
因为你的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>
随时随地看视频慕课网APP
Html/CSS
Html5
JavaScript