이벤트 버블링 응용과 dataset 관련 질문

  
html코드는 주신대로 적어 놨구요,


자스 코드는 제이쿼리 없이 그냥 썼습니다.
동작은 잘하는데 옥의 티가 하나 있습니다. 

이렇게 웹 페이지 들어가서 1번 2번 탭을 선택해도 ui가 변하지 않는데 
이후에 한 번 더 1번 혹은 2번 탭을 클릭하면 그제서야 ui가 변합니다.
그리고 한 번 바뀌고 난 후엔 원래 의도한 대로 잘 동작하구요.
혹시 e.target.dataset.id의 타입 때문에 그런가 싶어서 parseInt()를 갖다 써보기도 했는데 똑같습니다. 이거 왜 이런걸까요,,??

항상 잘 듣고 있습니다. 감사합니다,,