부트스트랩4 동적 탭 인터페이스 - id 없이 구현

1 개요

부트스트랩4 동적 탭 인터페이스 - id 자동부여

부트스트랩4 동적 탭 인터페이스 - id 없이 구현

2 예시1: 1개

<link rel="stylesheet" href="//unpkg.com/bootstrap@4/dist/css/bootstrap.min.css">
<script src='//unpkg.com/jquery@3/dist/jquery.min.js'></script>
<script src='//unpkg.com/popper.js@1/dist/umd/popper.min.js'></script>
<script src='//unpkg.com/bootstrap@4/dist/js/bootstrap.min.js'></script>

<div id="mytabs">
  <ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" data-toggle="tab">탭1</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab">탭2</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab">탭3</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active">내용1</div>
    <div class="tab-pane fade">내용2</div>
    <div class="tab-pane fade">내용3</div>
  </div>
</div>

<script>
$("#mytabs>ul>li>a").each(function(i){$(this).attr("href","#mytab"+i)})
$("#mytabs>div>div").each(function(i){$(this).attr("id","mytab"+i)})
</script>

3 예시2: 여러개

<link rel="stylesheet" href="//unpkg.com/bootstrap@4/dist/css/bootstrap.min.css">
<script src='//unpkg.com/jquery@3/dist/jquery.min.js'></script>
<script src='//unpkg.com/popper.js@1/dist/umd/popper.min.js'></script>
<script src='//unpkg.com/bootstrap@4/dist/js/bootstrap.min.js'></script>

<div class="mytabs">
  <ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" data-toggle="tab">탭A1</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab">탭A2</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab">탭A3</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active">내용A1</div>
    <div class="tab-pane fade">내용A2</div>
    <div class="tab-pane fade">내용A3</div>
  </div>
</div>

<div class="mytabs">
  <ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" data-toggle="tab">탭B1</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab">탭B2</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab">탭B3</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active">내용B1</div>
    <div class="tab-pane fade">내용B2</div>
    <div class="tab-pane fade">내용B3</div>
  </div>
</div>

<script>
$('.mytabs').each(function(i){
$(this).find('ul>li>a').each(function(j){$(this).attr("href","#mytab-"+i+"-"+j)})
$(this).find('div>div').each(function(j){$(this).attr("id","mytab-"+i+"-"+j)})
})
</script>

4 같이 보기

• 부트스트랩4 동적 탭 인터페이스