부트 스트랩 4 내용이 대시 보드와 올바르게 작동하지 않는 탭이 있습니다.

Question

부트 스트랩의 대시 보드 템플릿을 사용하여 간단한 페이지를 작성하고 싶습니다. 현재는 본문의 다른 내용 창을 사용하여 탐색 막대에 탭을 구현하지 않았습니다.

전반적으로 두 개의 창과 함께 작동하지만 첫 번째 창에서 두 번째 창으로 전환하고 첫 번째 창으로 다시 전환하면 두 탭 내용이 모두 표시됩니다. 다시 전환하면 올바르게 작동합니다 (첫 번째 탭의 목록 요소가 더 이상 활성화되지 않았음에도 불구하고).

제대로 작동하지 않는 jsfiddle를 만들었지 만 hunzaboys codepen이 제대로 작동하고 있으며 내 문제가 있습니다.

어디에서 오류가 있습니까? 전환 할 때 탭 내용이 모두 표시되는 이유는 무엇입니까?

편집 :

문제가 탭이 활성 요소가 탐색없는 경우에도 (문제를 일으킬 것 같다 내부, 특히 두 개의 "활성"클래스를 가진, 주장 탭 안에 중첩 다른 네비게이션 바에을 가진 것처럼

보인다 항목 또는 다른 것). 다시 "Überblick"가기 메뉴 바에서 "Einstellungen"사이에 전환하는 경우 https://codepen.io/anon/pen/KXMoRV

다시 당신이 동시에 두 콘텐츠 창 활성 표시됩니다

나는 새로운 예를했다.

페이지를 새로 고침하고 45 행의 버튼에서 "활성"클래스를 제거하면 이는 발생하지 않습니다.

    <button class="btn btn-primary active" type="button">Test</button> 

나를 도와 줄 수있는 사람이 있습니까?

미리 도움을 청하십시오!

Answer 1

자신에 의해이 문제를 해결했다.

상위 탐색 모음과 각 콘텐츠 창에서 부트 스트랩의 nav 기능을 사용하는 대신 지금은 콘텐츠 창에서 부트 스트랩 탐색 만 사용하고 지금은 위쪽 탐색 모음을 수동으로 제어하고 있습니다.

$("#link-overview").on("click", function() { 
    console.log("[INFO] Showing overview"); 
    $("#pane-overview").show(); 
    $("#pane-settings").hide(); 
    } 
}); 

$("#link-settings").on("click", function() { 
    console.log("[INFO] Showing settings"); 
    $("#pane-settings").show(); 
    $("#pane-overview").hide(); 
    } 
}); 

Answer 2

귀하의 스크립트는 Boostrap Docs에 따라 적절한 순서로 포함되어 있지 않습니다. http://getbootstrap.com/docs/4.0/getting-started/download/#bootstrap-cdn

Codepen : 난 아무데도 적절한 답변이나 해결책을 발견하지 않았기 때문에 https://codepen.io/hunzaboy/pen/zEBPEw

/* 
 
* Base structure 
 
*/ 
 

 

 
/* Move down content because we have a fixed navbar that is 3.5rem tall */ 
 

 
body { 
 
    padding-top: 3.5rem; 
 
} 
 

 

 
/* 
 
* Typography 
 
*/ 
 

 
h1 { 
 
    margin-bottom: 20px; 
 
    padding-bottom: 9px; 
 
    border-bottom: 1px solid #eee; 
 
} 
 

 

 
/* 
 
* Sidebar 
 
*/ 
 

 
.sidebar { 
 
    position: fixed; 
 
    top: 51px; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 1000; 
 
    padding: 20px; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    /* Scrollable contents if viewport is shorter than content. */ 
 
    border-right: 1px solid #eee; 
 
} 
 

 

 
/* Sidebar navigation */ 
 

 
.sidebar { 
 
    padding-left: 0; 
 
    padding-right: 0; 
 
} 
 

 
.sidebar .nav { 
 
    margin-bottom: 20px; 
 
} 
 

 
.sidebar .nav-item { 
 
    width: 100%; 
 
} 
 

 
.sidebar .nav-item+.nav-item { 
 
    margin-left: 0; 
 
} 
 

 
.sidebar .nav-link { 
 
    border-radius: 0; 
 
} 
 

 

 
/* 
 
* Dashboard 
 
*/ 
 

 

 
/* Placeholders */ 
 

 
.placeholders { 
 
    padding-bottom: 3rem; 
 
} 
 

 
.placeholder img { 
 
    padding-top: 1.5rem; 
 
    padding-bottom: 1.5rem; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<!-- First jQuery --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!--Then Popper.js --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> 
 

 
<!-- Then Bootstrap --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 

 

 
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> 
 
    <a class="navbar-brand" href="#">Dashboard</a> 
 
    <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> 
 
     <span class="navbar-toggler-icon"></span> 
 
    </button> 
 

 
    <!-- Navbar --> 
 
    <div class="collapse navbar-collapse" id="navbarsExampleDefault"> 
 
    <ul class="nav navbar-nav mr-auto"> 
 
     <li role="presentation" class="active nav-item"> 
 
     <a class="nav-link" data-toggle="tab" aria-controls="tab-overview" href="#tab-overview">Übersicht</a> 
 
     </li> 
 
     <li role="presentation" class="nav-item"> 
 
     <a class="nav-link" data-toggle="tab" aria-controls="tab-overview" href="#tab-settings">Einstellungen</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav> 
 

 
<div class="container-fluid"> 
 
    <div class="tab-content"> 
 
    <div class="tab-pane active" id="tab-overview"> 
 
     <div class="row"> 
 
     <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar"> 
 
      <ul class="nav nav-pills flex-column"> 
 
      <li class="nav-item"> 
 
       <a class="nav-link active" href="#">Data 1</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#">Data 2</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#">Data 3</a> 
 
      </li> 
 
      </ul> 
 
     </nav> 
 

 
     <main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main"> 
 
      <h1>Dashboard</h1> 
 

 
      <section class="row text-center placeholders"> 
 
      <div class="col-6 col-sm-3 placeholder"> 
 
       <img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail"> 
 
       <h4>Label</h4> 
 
       <div class="text-muted">Something else</div> 
 
      </div> 
 
      <div class="col-6 col-sm-3 placeholder"> 
 
       <img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail"> 
 
       <h4>Label</h4> 
 
       <span class="text-muted">Something else</span> 
 
      </div> 
 
      <div class="col-6 col-sm-3 placeholder"> 
 
       <img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail"> 
 
       <h4>Label</h4> 
 
       <span class="text-muted">Something else</span> 
 
      </div> 
 
      <div class="col-6 col-sm-3 placeholder"> 
 
       <img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail"> 
 
       <h4>Label</h4> 
 
       <span class="text-muted">Something else</span> 
 
      </div> 
 
      </section> 
 
     </main> 
 
     </div> 
 
    </div> 
 

 
    <div class="tab-pane" id="tab-settings"> 
 
     <div class="row"> 
 
     <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar"> 
 
      <ul class="nav nav-pills flex-column"> 
 
      <li class="nav-item"> 
 
       <a class="nav-link active" href="#">Settings 1</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#">Settings 2</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#">Settings 3</a> 
 
      </li> 
 
      </ul> 
 
     </nav> 
 

 
     <main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main"> 
 
      <h1>Einstellungen</h1> 
 

 
      <section class="row text-center placeholders"> 
 
      <div class="col-12 col-sm-12 placeholder"> 
 
       <h4>Label</h4> 
 
       <div class="text-muted">Something else</div> 
 
      </div> 
 
      </section> 
 
     </main> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>