<div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介紹</li><!-- 默認(rèn)選中第一個(gè)li，current是決定紅底白字的樣式的 -->
                <li>規(guī)格與包裝</li>
                <li>售后保障</li>
                <li>商品評(píng)價(jià)（50000）</li>
                <li>手機(jī)社區(qū)</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;"><!-- 這個(gè)item是默認(rèn)顯示的，因?yàn)樗械膇tem的display值都為none -->
                商品介紹模塊內(nèi)容
            </div>
            <div class="item">
                規(guī)格與包裝模塊內(nèi)容
            </div>
            <div class="item">
                售后保障模塊內(nèi)容
            </div>
            <div class="item">
                商品評(píng)價(jià)（50000）模塊內(nèi)容
            </div>
            <div class="item">
                手機(jī)社區(qū)模塊內(nèi)容
            </div>
 
        </div>
</div>

<script>
        // 業(yè)務(wù)需求：點(diǎn)擊tab欄被點(diǎn)擊的tab欄擁有不一樣的樣式，其下方的div也要跟著點(diǎn)擊進(jìn)行切換實(shí)現(xiàn)內(nèi)容也跟著變動(dòng)的效果
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var tabs = document.querySelectorAll('.item');
        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('data-index', i);    // 給每個(gè)li添加一個(gè)data-index的自定義屬性，值是它們自己在lis中的下標(biāo)，這個(gè)值主要讓我們判斷我們當(dāng)前點(diǎn)擊的是哪個(gè)li從而幫助我們后續(xù)修改它對(duì)應(yīng)的div的display值
            lis[i].onclick = function () {
                // 1.第一步，用排他思想先做出用戶點(diǎn)擊誰(shuí)就給誰(shuí)class屬性賦值，注意其他沒(méi)有被點(diǎn)擊的都需要操作它們的class值為空，這就是干掉其他人留下我自己的排他思想
                for (var i = 0; i <lis.length; i++) {
                    lis[i].className = '';  // 用循環(huán)先將所有人（包括自己）的class類名為空
                }
                // 再單獨(dú)給自己修改class類名即留下我自己
                this.className = 'current';  // current這個(gè)類名的CSS樣式是已經(jīng)寫好了的
                
                // 然后上面的tab欄樣式好了就要處理第二步就是點(diǎn)擊誰(shuí)就讓其對(duì)應(yīng)的下屬div顯示出來(lái)，其他沒(méi)有被點(diǎn)擊的就隱藏，這里主要是需要先知道用戶點(diǎn)擊的是誰(shuí)，然后再給對(duì)象的div設(shè)置display為block即可。還是需用用排他思想來(lái)做哦
                // 第二步：根據(jù)點(diǎn)擊修改div的display屬性值
                var index = this.getAttribute('index'); // 獲取當(dāng)前被點(diǎn)擊的li的index
                for (var i = 0; i < lis.length; i++) { // 用循環(huán)讓每個(gè)item的display都為none即干掉所有人
                    tabs[i].style.display = 'none';
                }
                // 在tabs中鎖定li的index對(duì)應(yīng)的item單獨(dú)將它的display值改成block即留下我自己
                tabs[index].style.display = 'block';
            }
        }
</script>