tab标签页的实现

最新推荐文章于 2024-07-05 14:27:03 发布

qq_33205354

最新推荐文章于 2024-07-05 14:27:03 发布

阅读量1.5k

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_33205354/article/details/80492756

版权

我实现的比较简单，鼠标移上去和鼠标离开分别有函数，可能相对麻烦

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>tab选项卡</title>
       <style>
           a{color:black;}
           a:hover{color:blue}
           ul li{
               list-style: none;
               float:left;
               border:1px solid gray;
               width:100px;
               text-align: center;
               height:50px;
               line-height:50px;

           }
           ul li:hover{
               color:blue;
               cursor: pointer;
           }
       </style>
       <script>
           function fun(name){
               var a=document.getElementById(name+"_con");
               if(a.style.display=="none")
               {
                   a.style.display="block";
               }

           }
           function func(name){
               var a=document.getElementById(name+"_con");
               if(a.style.display=="block")
               {
                   a.style.display="none";
               }

           }
       </script>
   </head>
   <body>
       <div>
           <ul>
               <li id="one" οnmοuseοver="fun('one')" οnmοuseοut="func('one')">孟美岐</li>
               <li id="two" οnmοuseοver="fun('two')" οnmοuseοut="func('two')">吴宣仪</li>
               <li id="three" οnmοuseοver="fun('three')" οnmοuseοut="func('three')">exy</li>
           </ul>
       </div>
       <div style="width:305px;height:200px;border:2px solid black;margin-left:40px;margin-top:50px;text-align: center;">
           <div style="display: none;" id="one_con">
               孟美岐孟美岐孟美岐孟美岐孟美岐
           </div>
           <div style="display: none;" id="two_con">
               吴宣仪吴宣仪吴宣仪吴宣仪吴宣仪
           </div>
           <div style="display: none;" id="three_con">
               exyexyexyexyexy
           </div>
       </div>
   </body>
</html>

qq_33205354

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
tab标签页的实现

我实现的比较简单，鼠标移上去和鼠标离开分别有函数，可能相对麻烦&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;tab选项卡&lt;/title&gt; &lt;style&gt;
复制链接

扫一扫