欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

小程序开发实例（tad分栏制作)

程序员文章站 2022-07-06 16:34:51
南宁小程序开发公司：www.zkelm.com尽管每天都学一点，但是感觉进步还是有点慢。慢吞吞的有点像乌龟，咋搞咋搞，要达到目标值，好像时间挺不够用。穷是原罪，菜是原罪. 好吧 先学起来在说了，反正只要进步 就是好事！今天要做得就是Tad分栏。一个很使用的小组件功能， 纯JS操作，确实也是必备能力之一！前端的常用组件。1.要先有一定的css 布局基础 ，小组件需要的东西，其实是一种综合性的，如果没有对css 和js理解的话 看起来估计有点小难度，废话不多说，我们先做一个box 放入几个li....

南宁小程序开发公司：www.zkelm.com

尽管每天都学一点，但是感觉进步还是有点慢。慢吞吞的有点像乌龟，咋搞咋搞，要达到目标值，好像时间挺不够用。
穷是原罪，菜是原罪. 好吧 先学起来在说了，反正只要进步 就是好事！

今天要做得就是Tad分栏。一个很使用的小组件功能， 纯JS操作，确实也是必备能力之一！前端的常用组件。
小程序开发实例（tad分栏制作)

1.要先有一定的css 布局基础 ，小组件需要的东西，其实是一种综合性的，如果没有对css 和js理解的话 看起来估计有点小难度，
废话不多说，我们先做一个box 放入几个li

<div class="box">
  <ul>
     <li><a href="">小程序开发</a></li>
     <li><a href="">企业oa开发</a></li>
     <li><a href="">网站开发</a></li>
     <li><a href="">公众号开发</a></li>
  </ul>
  <div class="items">
     <div class="item">这里是小程序开发：www.zkelm.com</div>
     <div class="item">这里是企业oa开发：www.zkelm.com</div>
     <div class="item">这里是网站开发：www.zkelm.com</div>
     <div class="item">这里是公众号开发：www.zkelm.com</div>
  </div>
</div>

显示的效果如下：
小程序开发实例（tad分栏制作)
接下来我们美化一下！

ul{
				list-style-type: none;
				display: flex;
				background-color: #ccc;
				margin: 0;
				padding: 0;
			}
			ul li a{
				text-decoration:none;
				display: block;
				width:60px;
				height: 30px;
				background-color: #888;
				line-height: 30px;
				text-align:center;
				color:#eee;
				border: none;
				
			}
			ul li{
				margin:1px;	
				border: none;
			}
			.items{
				border:1px solid #ccc;
				height: 100px;
				border-top:None;
				background-color: #EEEEEE;
				padding: 5px;
			}
			
			.item{
				display: none;
			}
			.enter{
				background-color: #EEEEEE;
				color:#000000;
			}
			.myshow{
				display: block;
			}

显示效果如下
小程序开发实例（tad分栏制作)

思路：1.先写 ul li 里面的 点击事件

      //获取全部A元素，他的效果是alist[0]=a(首页) alist[1]=a(其它)
  var  alist=document.querySelector("ul").querySelectAll("a");   
     //获取底部的 div （内容）。并存储在数组中一一对应 divlist[0]=div1  divlist[1]=div2
  var divlis=document.querySelector(".items").querySelectorAll("item");
     //给每个A添加onclick事件
     
      for(var i=0;i<alist.length;i++){
          alist[i].onclick=function(){
            //首先，点击的时候就把for所有的元素a标签都换成统一风格
             for(var m=0;m<alist.length;m++){
                  //排他性
                  alist[m].className=""
              }
              //排除其他的风格后 ，只标注自己
              alist[i].className="enter"
           }
       }

运行的代码就是这样子的

小程序开发实例（tad分栏制作)

2.第二步： 点击的时候让底下的div 依次显示他的内容，其余的全部隐藏 所以js的代码改成！

<script type="text/javascript">
  
      var  alist=document.querySelector("ul").querySelectorAll("a");
      var  itemlist=document.querySelector(".items").querySelectorAll(".item");
  
       for(var i=0;i<alist.length;i++){
   
                 alist[i].onclick=function(){
                     for(var m=0;m<alist.length;m++){
						 
                         alist[m].className="";
                         itemlist[m].className="item";      
                        }   
                 this.className="enter"; 
                 var idex=this.getAttribute("index");
                   //itemlist[idex].className="myshow";  
                }
                alist[i].setAttribute("index",i);
        }
 </script>

这里做重点的讲解： alist[i].setAttribute(“index”,i)
会在 a标签之中加入属性 index、 然后 点击的时候 读取他的属性 index的值， 用来做 items 里面的item定位显示
小程序开发实例（tad分栏制作)
如图 divlist[0]=小程序开发：www.zkelm.com
divlist[1]=企业oa开发：www.zkelm.com
divlist[1]=网站建设：www.zkelm.com
divlist[1]=公众号开发：www.zkelm.com

完整的代码如下：

<!DOCTYPE html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Tab分栏制作</title>
  <style>
   ul{
    list-style-type: none;
    display: flex;
    background-color: #ccc;
    margin: 0;
    padding: 0;
   }
   ul li a{
    text-decoration:none;
    display: block;
    width:100px;
    height: 30px;
    background-color: #888;
    line-height: 30px;
    text-align:center;
    color:#eee;
    border: none;
    
   }
   ul li{
    margin:1px; 
    border: none;
   }
   .items{
    border:1px solid #ccc;
    height: 100px;
    border-top:None;
    background-color: #EEEEEE;
    padding: 5px;
   }
   
   .item{
    display: none;
   }
   .enter{
    background-color: #EEEEEE;
    color:#000000;
   }
   .myshow{
    display: block;
   }
  </style>
 </head>
 <body>
  <div id="box">
   <ul>
    <li><a href="#">小程序开发</a></li>
    <li><a href="#">企业oa开发</a></li>
    <li><a href="#">网站开发</a></li>
    <li><a href="#">公众号开发</a></li>
   </ul>
   <div class="items">
    <div class="item">这里是小程序开发：www.zkelm.com</div>
    <div class="item">这里是企业oa开发：www.zkelm.com</div>
    <div class="item">这里是网站开发：www.zkelm.com</div>
    <div class="item">这里是公众号开发：www.zkelm.com</div>
   </div>
  </div>
  
 </body>
 <script type="text/javascript">
  
  
      var  alist=document.querySelector("ul").querySelectorAll("a");
      var  itemlist=document.querySelector(".items").querySelectorAll(".item");
  
       for(var i=0;i<alist.length;i++){
   
                 alist[i].onclick=function(){
                     for(var m=0;m<alist.length;m++){
						 
                         alist[m].className="";
                         itemlist[m].className="item";      
                        }   
                 this.className="enter"; 
                 var idex=this.getAttribute("index");
                   //itemlist[idex].className="myshow";  
                }
                alist[i].setAttribute("index",i);
        }
 </script>
</html>

每天进步1% 争取不堕落。广西小程序开发：www.zkelm.com

本文地址：https://blog.csdn.net/zkelm/article/details/107148742

上一篇： 大家都是如何刷 LeetCode 的？

下一篇： TypeScript基础知识总结

推荐阅读