view
html
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="anchor-scroll">
<div class="anchor-scroll-list">
<a href="#anchor-scroll-1" class="anchor-scroll-anchor">anchor 1</a>
<a href="#anchor-scroll-2" class="anchor-scroll-anchor">anchor 2</a>
<a href="#anchor-scroll-3" class="anchor-scroll-anchor">anchor 3</a>
</div>
<div id="anchor-scroll-1" class="anchor-scroll-panel">섹션 1 내용</div>
<div id="anchor-scroll-2" class="anchor-scroll-panel">섹션 2 내용</div>
<div id="anchor-scroll-3" class="anchor-scroll-panel">섹션 3 내용</div>
</div>
- 활성화된 a태그에 is-active 클래스 생성
- 활성화된 panel에 tabindex 일시적으로 추가 및 제거