tab切换效果的实现-JS原生

tab切换效果的实现-JS原生

个人一直偏爱于用JS来编写代码，今后会不定时上传一些用JS原生实现的效果，请大家多多指教

tab切换
在这里主要列出我的布局和JS代码
html：
（注：我在第一个li中定义了行间样式，当然最好是不要这样写，可以给个类名）

<div>
    <ul>
        <li style="background: #c0d377;">水果li><li>蔬菜li><li>肉类li>
    ul>
    <div style="display: block;"><p>苹果p>div>
    <div><p>韭菜p>div>
    <div><p>鱼肉p>div>
div>

JS代码：

var LI=document.getElementsByTagName("li");
    var DIV=document.getElementsByTagName("div");
    for(var i=0;ifunction(){
            for(var j=0;j'#c9d98c';
                DIV[j+1].style.display='none';
            }
            this.style.background='#c0d377';
            DIV[this.index+1].style.display='block';
        }
    }

最后出来的效果大概是这样，是不是很卡哇伊呢，当然样式可以自行调整。

大家有觉得不对的地方可以留言讨论，以后会继续改进，继续完善