学习日志

部分案例如下

//tab栏切换案例
<div class="tab">
            <div class="tab_list">
                <ul>
                    <li class="current">商品介绍</li>
                    <li>规格与包装</li>
                    <li>售后保障</li>
                    <li>商品评价</li>
                    <li>手机社区</li>
                </ul>
            </div>
            <div class="tab_con">
                <div class="item" style="display: block;">
                    商品介绍模块
                </div>
                <div class="item">
                    规格与包装模块
                </div>
                <div class="item">
                    售后保障模块
                </div>
                <div class="item">
                    商品评价模块
                </div>
                <div class="item">
                    手机社区模块
                </div>
            </div>
        </div>

            var tab_list=document.querySelector('.tab_list');
            var lis=tab_list.querySelectorAll('li')
            var items=document.querySelectorAll('.item')
            for(var i=0;i<lis.length;i++){
                //开始给五个小li设置索引号，利用setAttribute添加属性
                lis[i].setAttribute('index',i);
                lis[i].onclick=function(){
                    for(var i=0;i<lis.length;i++){
                        lis[i].className=""
                    }
                    this.className='current';
                    //获取属性
                    var index=this.getAttribute('index');
                    console.log(index);//获取li元素当前的下标
                    //排它思想
                    for(var i=0;i<items.length;i++){
                        items[i].style.display="none";
                    }
                    items[index].style.display='block';
                }
            }

学习感受

​ 今天还是以学习js基础为主，不断的练习，后面复习了一下简单的vue指令。一步一步安踏的才不会踩空。