DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=!, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        *{margin:0;padding:0;box-sizing: border-box;}
        ul{list-style-type:none;}
        #wrap {
            width:100vw;
            height:100vh;
            background-color:#eee;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .content{
            width:30vw;
            height:30vw;
            border:1px solid #000;
        }
        .menu {
            display:flex;
           
        }
        .menu li{
            width:25%;
            text-align:center;
            border-right:1px solid #fff;
            height:25px;
        }
        .menu li a{
            display:block;
            color:#fff;
            background-color:rgb(109, 198, 240);
            height:25px;
            text-decoration:none;
        }
        .menu li.On a{
            background-color:#000;

        }
        .menu li:last-child{
            border-right:none;
        }
        .box {
            width:100%;
            height:calc(100% - 25px);
            position:relative;

        }
        .box .inner{
            position:absolute;
            width:100%;
            height:100%;
            font-size:5vw;
            justify-content:center;
            display:flex;
            align-items:center;
            opacity:0;
        }
        .box .inner.Active{
            opacity:1
        }
        .box .inner.b01{
            background-color:rgb(113, 156, 236);
        }
        .box .inner.b02{
            background-color:rgb(236, 113, 195);
        }
        .box .inner.b03{
            background-color:rgb(236, 199, 113);
        }
        .box .inner.b04{
            background-color:rgb(236, 172, 113);
        }
    style>
head>
<body>
    <div id="wrap">
        <div class="content">
            <ul class="menu">
                <li ><a href="#" class="btn"> 0menua>li>
                <li><a href="#" class="btn"> 1menua>li>
                <li><a href="#" class="btn"> 2menua>li>
                <li><a href="#" class="btn"> 3menua>li>
            ul>
            <ul class="box">
                <li class="inner b01 Active" data-index="0">content01li>
                <li class="inner b02" data-index="1">content02li>
                <li class="inner b03" data-index="2">content03li>
                <li class="inner b04" data-index="3">content04li>
            ul>
        div>
    div>
    <script>
        (function(){
            const menuList = document.querySelector('.menu');

            let currentItem;
            const content=document.querySelector('.box');
            const inner = content.childNodes;
            console.log(inner);

            function handler(e){
                const targetElem = e.target;
                // console.log(targetElem);

                if(currentItem){
                    currentItem.classList.remove('On');
                }
                if(targetElem.classList.contains('btn')){
                    targetElem.parentNode.classList.add('On');

                    currentItem= targetElem.parentNode;

                }

              
            }

            menuList.addEventListener('click',handler);

            // data-index 추가
        menuList.querySelectorAll(".btn").forEach(function (item, i) {
          item.dataset.index = i;
          console.log(i)

            if(content.childNodes.classList.contains('inner')){

                content.childNodes.dataset.index[i].classList.add('Active')
            }

 

        });
        })()
    script>
body>
html>
이렇게 쓰니 에러가 뜨네요~ ㅜㅜ 자식요소의 dataset중 index가 i 인 아이한테 클래스 붙여라라고 생각한건데 잘못된 점이 무었일까요
LEETY

Posts
