自定义属性/tab栏切换知识简介

最新推荐文章于 2022-08-23 23:53:30 发布

Pirate 船长

最新推荐文章于 2022-08-23 23:53:30 发布

阅读量247

点赞数 2

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/weixin_54259919/article/details/120940254

版权

自定义属性

规范用处

保存我的数据，使用这个数据

data-属性名="属性值"

方法集

方法	说明
var div = document.getElementById('data-index')	获取自定义属性所在的标签
div.getAttribute('自定义属性')	获取自定义属性值
div.setAttribute('自定义属性'，'值')	设置修改自定义属性值
div.setAttribute('class'，'新的类名')	修改class的类名
div.removeAttribute('属性')	移除调用者的括号内的属性
div.dataset	调出所有以data开头的自定义属性返回值为集合
div.dataset.属性	调用div下的data开头的自定义属性
div.dataset.listName	调用div下的data开头的自定义属性名

tab栏切换

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">   
 <title>Title</title> 
 <style> 
   *{      margin: 0;  
           padding: 0;
           list-style: none; 
   }   
 .tab{      
             width: 620px;  
            height: 100px;     
             border: 4px solid black;  
             margin: 5% auto;    }    
   .tab_list li{  
             float: left;     
              height: 39px;
              line-height: 39px;
                padding: 0 20px;  
                text-align: center;  
                  cursor: pointer;  
                 background-color: #EEF1EE; 
                 border-bottom: 1px solid #c81623; 
                      } 
      .tab_list .current{ 
                   background-color: #c81623;
                    color: #fff; 
                      } 
        .item_info{   
                padding: 20px 0  0 20px ; 
                  }
       .item{     
               display: none;
            } 
       .item:first-child{  
                     display: block;
                        } 
       </style>
</head>
<body>
<div class="tab"> 
 <div class="tab_list">  
  <ul>    
  <li class="current">商品介绍</li>  
    <li>规格与包装</li> 
     <li>售后保障</li>
      <li>商品评价（50000）</li> 
     <li>手机社区</li>    </ul> 
 </div>
  <div class="tab_con">
    <div  class="item"> 业介绍内容 </div>
    <div  class="item">  规格与包装内容  </div> 
   <div  class="item">    售后保障内容    </div>
    <div  class="item">      商品评价（50000）内容    </div> 
   <div  class="item">      手机社区内容    </div>  
</div>
</div>
</body>
<script> 
 //两个模块
           1.点击后选项卡背景色为红色 
            2.点击后内容切换至相关内容 
 //第一模块 
 var tab_list = document.getElementsByClassName('tab_list')[0] 
 var lis = tab_list.getElementsByTagName('li')  
  var item = document.getElementsByClassName('item')  
        for (var i = 0; i < lis.length; i++) {  
        //给所有小li设置自定义属性   
           lis[i].setAttribute('index',i)
            lis[i].onclick = function (){ 
            //干掉所有人    
          for (var j = 0; j < lis.length; j++) {  
                   lis[j].className=''  
                         }   
           //留下我自己  
      this.className='current' 
         //得到点击的li元素下标 
          var index = this.getAttribute('index') 
        //干掉其他的  
       for (var j = 0; j < lis.length; j++) {  
            item[j].style.display='none'   
               }  
        //留下我自己 修改内容的显示层数  
    item[index].style.display='block'  
            } 
         }
   </script>
</html>

Pirate 船长

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自定义属性/tab栏切换知识简介

自定义属性规范用处保存我的数据，使用这个数据data-属性名="属性值"方法集方法说明 var div = document.getElementById('data-index') 获取自定义属性所在的标签 div.getAttribute('自定义属性') 获取自定义属性值 div.setAttribute('自定义属性'，'值') 设置修改自定义属性值 div.setAttribute('class'，'新的类名') 修改...
复制链接

扫一扫