tap JS切换，

最新推荐文章于 2024-04-14 17:05:03 发布

zhoujiaxi_

最新推荐文章于 2024-04-14 17:05:03 发布

阅读量776

点赞数

分类专栏： HTM

本文链接：https://blog.csdn.net/qq_35385797/article/details/82746811

版权

HTM 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

样式有点丑，凑合着看看，没有加横向滚动条，以后有时间再加

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>JS选项卡切换</title>
   <link rel="stylesheet" href="">
<style type="text/css">
*{
   margin: 0;
   padding: 0;
}
   .content{
       width: 400px;
       height: 300px;
       background-color: pink;
       margin: 100px auto;
   }
   .hd{
       height: 40px;
       background-color: blue;
   }
   .hd span{
       display: inline-block;
       height: 40px;
width: 90px;
margin-left:5px;
text-align: center;
line-height: 40px;
color: #ffffff;
cursor: pointer;
   }
   .hd .xuanzhong{
       background-color: #ffffff;
       color: #000;
   }
   .bd{
       height: 260px;

   }
   li{
       list-style: none;
       float: left;
       width: 400px;
       height: 260px;
       display: none;
   }
   .blk{
       display: block;
       background-color: yellow;
       color: red;
   }
</style>
</head>
<body>
   <div class="content">
       <div id="hd1" class="hd">
           <span class="xuanzhong">娱乐新闻</span>
           <span>体育新闻</span>
           <span>政治新闻</span>
           <span>新闻咨询</span>
       </div>
       <div id="bd" class="bd">
           <ul>
               <li class="blk">我是娱乐新闻</li>
               <li>我是体育新闻</li>
               <li>我是政治新闻</li>
               <li>我是新闻资讯</li>
           </ul>
       </div>
   </div>

<script type="text/javascript">
   var spObejct = document.getElementById('hd1').getElementsByTagName('span');
   var liObejct = document.getElementById('bd').getElementsByTagName('li');
   console.log(spObejct);
   for (var i =0; i<spObejct.length; i++) {
       spObejct[i].setAttribute('index',i);
       spObejct[i].οnclick=function(){
           //移除所有的span类样式
           for (var j = 0; j<spObejct.length; j++) {
       spObejct[j].removeAttribute('class');
           }
           //给正在点击的span标签添加样式
           this.className="xuanzhong";

           //获取当前span 的索引值
           var num = this.getAttribute('index');

               //隐藏其他Li
               for (var k = 0 ; k<liObejct.length;k++){
                  liObejct[k].removeAttribute('class');
               }
               //显示指定的li
               liObejct[num].className='blk';

       }


   }
// var liObejct = document.getElementById('bd').getElementsByTagName('li');
</script>

</body>
</html>

效果图：

zhoujiaxi_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
tap JS切换，

样式有点丑，凑合着看看，没有加横向滚动条，以后有时间再加&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &l
复制链接

扫一扫