부트 스트랩 탭에 "닫기"버튼 추가 콘텐츠

Question

부트 스트랩 탭 내용에 "닫기"버튼을 추가하는 데 문제가 있습니다. 마우스를 올리면 탭이 열리고 닫히게 될뿐만 아니라 사용자가 탭을 클릭하고 닫을 수 있도록 버튼을 추가해야합니다.

<!-- SIDE NAV --> 
    <div class="col-xs-3 hidden-xs"> 
     <div class="row"> 
      <nav class="side-nav"> 
       <ul class="nav nav-tabs" role="tablist"> 
        <li role="presentation" class="full-width"> 
         <a href="#accueil" aria-controls="accueil" role="tab" data-toggle="tab">TAB 1</a> 
        </li> 
        <li role="presentation" class="full-width"> 
         <a href="#connaitre-la-ccmv" aria-controls="connaitre-la-ccmv" role="tab" data-toggle="tab">TAB 2</a> 
        </li> 
       </ul> 
      </nav> 
     </div> 
    </div> 

    <!-- Tab panes --> 
     <div class="tab-content col-xs-9 hidden-xs"> 
      <div role="tabpanel" class="tab-pane row" id="accueil"> 
       <div class="col-xs-4"> 
        <h5 class="title-tab">TAB CONTENT 1</h5> 
        <ul class="list-tab"> 
         <li> 
          <a href="">Some text</a> 
         </li> 
         <li> 
          <a href="">Some other text</a> 
         </li> 
        </ul> 
       </div> 
       <div class="col-xs-12"> 
        <button type="button" class="close">X</button> 
       </div> 
      </div> 
     </div> 
... 

누군가 js 부분을 도와 줄 수 있습니까? 부트 스트랩 문서에서 아무 것도 발견하지 못했습니다 ...

Answer 1

jquery에서 닫기 버튼을 조작하고 버튼을 클릭하면 탭을 숨김으로써 스타일을 CSS에 넣을 수 있습니다.

이 탭을 숨기려면이 CSS를 사용하십시오.

.display_none{ 
    display: none !important; 
} 

jquery 코드에서 이것을 사용하십시오.

$('.close').click(function(){ 
    $('.tab-content').addClass('display_none'); 
}); 

이 지침 enter link description here

편집 jQuery를 참조하십시오. JS 아래이 코드를 넣어 함께

Answer 2

그것은 매우 간단 사람이 바로 활성 클래스를 제거 -

$("button").click(function(){$("div").removeClass("active");});