tap栏切换（固定位置型）

tap栏切换部分：

HTML内容部分：

第一部分的div标签是tap栏之间的切换，第二层div标签包裹的div是下面固定的位置里面的内容部分，通过HTML进行整合框架。 

<div class="nav">
            <a href="javascript:;">我的布局</a>
            <a href="javascript:;">我的布局</a>
            <a href="javascript:;">我的布局</a>
            <a href="javascript:;">我的布局</a>
            <a href="javascript:;">我的布局</a>
        </div>

        <div class="nav_list">
            <div class="text">1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>

 css内容部分：采用了隐藏的方式将内容部分给隐藏，随后给ClassName设置一个类，设置其背景色，根据需求添加至指定位置，从而实现一定的效果

.nav a{
              text-decoration:none;
              width:140px;
              height: 30px;
              border:1px solid #eee;
              text-align: center;
              line-height:30px;
              display: inline-block;
              color:#000;
          }
          .text~div{
              display:none;
          }
          .hover{
              background-color:#AAFFFF;
          }

下面的是js内容部分：采用了自定义属性，添加及获取，还有remove这里未使用，供大家了解一下，remove后面接Attribute属性。快来一起实现操作吧！！！

   // var navs=document.querySelectorAll('a');
		 // var list=document.querySelectorAll('.nav_list div');
		 // for(var i=0;i<navs.length;i++){
			//   navs[i].setAttribute('index',i);
			//   navs[i].onclick=function(){
			//   var thisname=this.getAttribute('index');
			//   for(var j=0;j<navs.length;j++){
			//    navs[j].className='';
			//    list[j].style.display='none';
			// 	 }
			//    this.className='hover';
			//    list[thisname].style.display='block'; 
			//  }
		 // }