dataset

<li class="tab-button" data-id="0">Products</li>

dataset์€ ํ™”๋ฉด์—์„œ ๋ณด์ด์ง€ ์•Š๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ์ˆจ๊ฒจ ๋‘˜ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ HTML5์—์„œ ์ƒˆ๋กœ ํ™•์žฅ๋œ ์†์„ฑ

document.querySelector('.tab-button').dataset.id;
// ์ถœ๋ ฅ ๊ฒฐ๊ณผ '0' 

js011.html
<li class="tab-button" data-id="0">Products</li>
<li class="tab-button orange" data-id="1">Information</li>
<li class="tab-button" data-id="2">Shipping</li>
app.js
$('.list').click(function(e){
  tabOpen(e.target.dataset.id);
})

์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ๊ธฐ์กด์˜ ์ฝ”๋“œ๋ณด๋‹ค ๋งŽ์ด ์ค„์—ฌ์„œ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.

๊ธฐ์กด์˜ ๋ฐฉ๋ฒ•๋Œ€๋กœ ํ•ด๋„ ๊ดœ์ฐฎ์ง€๋งŒ ๋‚ด๊ฐ€ ์ง  ์†Œ์Šค์ฝ”๋“œ๋ฅผ ์–ด๋–ป๊ฒŒ ํ•˜๋ฉด ๋” ์ค„์ด๊ณ 

๊ฐ€๋…์„ฑ์„ ์ข‹๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‚˜ ๊ณ ๋ฏผํ•˜๋Š”๊ฒŒ ์‹ค๋ ฅํ–ฅ์ƒ์— ๋งŽ์€ ๋„์›€์ด ๋œ๋‹ค.

Last updated