鼠标点击更换标签页js效果

最新推荐文章于 2021-06-04 21:55:24 发布

南临

最新推荐文章于 2021-06-04 21:55:24 发布

阅读量204

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43347600/article/details/107104944

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <style type="text/css">
       *{
           margin: 0;
           padding: 0;
           list-style: none;
       }
       li{
           display: inline-block;
           width: 130px;
           height: 40px;
           background-color: burlywood;
           text-align: center;
           font-weight: bold;
           line-height: 30px;
           cursor: pointer;
       }
       div{
           width: 400px;
           height: 250px;
           background-color: #829B1A;
           display: none;
       }
       .content{
           display: block;
       }
       .tab{
           background-color: #829B1A;
       }

   </style>
   <body>
       <ul>
           <li class="tab">体育</li>
           <li>娱乐</li>
           <li>军事</li>
       </ul>
       <div class="content">这里是体育频道</div>
       <div id="">这里是娱乐频道</div>
       <div id="">这里是军事频道</div>
   </body>
</html>
<script type="text/javascript">
   //给每个li绑定鼠标单击事件,单击的时候修改li和div的class的值
   var lis = document.getElementsByTagName('li');
   var divs = document.getElementsByTagName('div');
   for (var i=0;i<lis.length;i++) {
       lis[i].a = i;//为每个li添加一个属性，这个属性表示li的下标
       lis[i].onclick = function(){
           //alert(this.a);
           for (var j=0;j<lis.length;j++) {
               //当前点击的li的下标是this.a
               if(j == this.a){
                   lis[j].className = 'tab';
                   divs[j].className = 'content'
               }
               else{
                    lis[j].className = '';
                    divs[j].className = ''
               }
           }
       };
   }
</script>