猿问

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代码我没有贴出来

Sprash
浏览 2249回答 1
1回答

李晓健

因为你的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
我要回答