탭UI 01

인덱스 번호활용

jQuery

javascript

탭UI 02 진짜쉽다!

탭 UI 는 버튼 클릭시 해당 패널이 보이는 것을 의미한다.
그러므로 간단히 생각하면 버튼을 선택하고 패널을 선택후 보이게 하면 된다

02-1

html

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 탭: 클릭한것만 보이기(나머지 감추기) -->
</head>

<body>
  <ul>
    <li class="b1">btn1</li>
    <li class="b2">btn2</li>
    <li class="b3">btn3</li>
  </ul>
  <div>
    <h3 class="h1">para1</h3>
    <h3 class="h2">para2</h3>
    <h3 class="h3">para3</h3>
  </div>

  <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>

</body>

</html>

javascript

var h1=document.querySelector(".h1");
var h2=document.querySelector(".h2");
var h3=document.querySelector(".h3");
var b1=document.querySelector(".b1");
var b2=document.querySelector(".b2");
var b3=document.querySelector(".b3");
    h2.style.display = "none";
h3.style.display = "none";

b1.onclick=function(){  //버튼1을 클릭하면
  h1.style.display="block"; //패널1이 보인다
  h2.style.display="none";  //다른패널은 숨긴다
  h3.style.display="none";
}
b2.onclick=function(){
  h1.style.display="none";
  h2.style.display="block";
  h3.style.display="none";
}
b3.onclick=function(){
  h1.style.display="none";
  h2.style.display="none";
  h3.style.display="block";
}

JQuery

$('h3').hide();
$('.h1').show();
$('.b1').click(function () {
  $('.h1').show();
  $('.h2').hide();
  $('.h3').hide();
})
$('.b2').click(function () {
  $('.h1').hide();
  $('.h2').show();
  $('.h3').hide();
})
$('.b3').click(function () {
  $('.h1').hide();
  $('.h2').hide();
  $('.h3').show();
})

02-2

Refactoring
😺 1. 반복되는 요소를 변수로 저장하자
😺 2. 반복되는 기능을 함수로 묶고 변하는 부분을 매개변수로 바꿔보자
😺 3. 1번과 2번에서 작성한 함수와 변수를 사용하여 코드를 바꿔보자
😺 4. 3번에서 바꿔본 코드의 반복되는 부분을 줄여보자

JQuery

const btn = $('ul>li'), panel = $('h3');
hidden(panel);
visible(panel.eq(0));
btn.each(function (i, o) {
  btn.eq(i).click(function () {
    hidden(panel);
    visible(panel.eq(i));
  })
})
function visible(obj) {
  obj.show();
}
function hidden(obj) {
  obj.hide();
}

javascript

const btn = document.querySelectorAll('ul>li'), panel = document.querySelectorAll('h3');

hidden(panel);
visible(panel[0]);
btn.forEach((el, i) => {
  el.addEventListener("click", function () {
    hidden(panel)
    visible(panel[i])
  })

});

function visible(obj) {
  obj.length == undefined ? obj.style.display = 'block' :
    obj.foreach((o) => {
      o.style.display = 'block';
    })
}

function hidden(obj) {
  obj.length == undefined ? obj.style.display = 'none' : obj.forEach((o) => {
    o.style.display = 'none'
  })
}