2020-11-18总结

学习复习了一下tab栏

css排版我没有太注重
只是简单粗略的做了一下js

<table>
    <ul>
        <li class="li_on">商品介绍</li>
        <li>规格与包装</li>
        <li>售后</li>
        <li>商品评价</li>
        <li>手机社区</li>
    </ul>
</table>

<div class="box2">
    <div class="item" style="display: block;">商品介绍模块</div>
    <div class="item" style="display: none;">规格与包装模块</div>
    <div class="item" style="display: none;">售后模块</div>
    <div class="item" style="display: none;">商品评价模块</div>
    <div class="item" style="display: none;">手机社区模块</div>
</div>

这里是script代码 var box1 = document.querySelectorAll('.box1') var lis = document.querySelectorAll('li') var items = document.querySelectorAll('.item') for (var i = 0; i < lis.length; i++) { // 按照for循环里的，为每一个li添加一个自定义属性index，并赋值 lis[i].setAttribute('index', i) lis[i].onclick = function () { for (var i = 0; i < lis.length; i++) { lis[i].className = '' } this.className = 'li_on' // 当点击这个模块的时候，获取一下点击的值，为下面显示什么模块铺垫 var index = this.getAttribute('index') for (var i = 0; i < items.length;i ++){ items[i].style.display= 'none' } items[index].style.display = 'block' } } 到这里

–
tab栏切换有两个大的模块
上面的模块选项卡，点击某一个，当前这一个底色会变成红色，其余的不变（排他思想） 修改类名的方式
下面的模块内容，会跟随上面的选项卡变化，所以下面模块变化写到点击事件里面
规律：下面的模块显示内容和上面的选项卡对应，相匹配
核心思路：给上面的tab_list里面所有的小li添加自定义属性，属性值从0开始编号
当我们点击tab_list里面的某个小li时，让tab_con 里面对应序号的内容显示，其余的隐藏，排他思想

pink老师说如果你想去做一个项目，你大多数时间应该构思它的大体思路 首先是上边的tab栏的点击效果： 大体意思就是：如果你点击一个div所包含的内容，它的背景颜色变成红色 而其他的颜色都不换，如果再点击另一个，前一个的效果复原，而这个的颜色再次改变，专业术语就是：**排他思想** 首先你需要获取每一个li 在每次点击前，使用for循环体，把每一个li的背景颜色都设置为空 当点击任意一个的时候，给它的style的background-color设置为你想要设置的颜色，我本次的案例是红色 然后下面有每个li所对应的div 由于你设置的默认显示的那个li肯定是第一个：  就像这里的*商品介绍*里，在没有任何的操作之前，肯定他的颜色也是红色 你首先弹出的肯定是与他相对应的*商品介绍模块* 当点击li中的其他模块的时候：获取所点击的那个模块的序列 然后给它的style的display的属性值设置为block 同样的思想，在你给这个模块的样式设置block之前，应该使用for循环把另外的所有盒子都设置为display：none；这是隐藏 这样，你点击的时候，排他思想里，其他的都会消失，点击哪一个li，它对应的div就显示，这差不多也就是设计tab栏的所有思路