부트스트랩에서 닫을 수 있는 탭을 구현하는 방법-부트스트랩 튜토리얼-php.cn

부트스트랩에서 닫을 수 있는 탭을 구현하는 방법

藏色散人

풀어 주다： 2023-02-10 14:36:51

원래의

2563명이 탐색했습니다.

부트스트랩이 탭 닫기를 구현하는 방법: 1. script 태그를 사용하여 jquery를 도입합니다. 2. script 태그를 사용하여 "closable-tab-div" 플러그인을 도입합니다. 3. "var item={'id'를 사용합니다. :'1' ,'name':'Menu Management','url':'...}" 문을 사용하여 탭 레이블을 구현할 수 있습니다.

부트스트랩에서 닫을 수 있는 탭을 구현하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, bootstrap3 버전, Dell G3 컴퓨터.

Bootstrap은 Twitter에서 왔으며 현재 가장 인기 있는 프런트 엔드 프레임워크입니다. 부트스트랩은 HTML, CSS, JavaScript를 기반으로 하며 간단하고 유연합니다. 개발 과정에서 해당 클래스를 DOM 요소에 추가하여 호출하기만 하면 웹 개발 속도가 빨라집니다.

bootstrap은 닫을 수 있는 탭 탭을 구현합니다

인터넷에서 닫을 수 있는 탭 탭 플러그인을 찾았습니다: bootstrap-closable-tab 플러그인

페이지에서 bootstrap-closable-tab 플러그인을 참조하세요 닫을 수 있는 탭 탭 페이지 효과를 얻으려면

1. bootstrap-closable-tab 컴포넌트는 jquery와 bootstrap을 기반으로 하기 때문에 bootstrap 관련 플러그인을 도입해야 합니다.

부트스트랩에서 닫을 수 있는 탭을 구현하는 방법

전제 조건은 jquery 도입입니다:

부트스트랩에서 닫을 수 있는 탭을 구현하는 방법

2. 플러그인 도입:

부트스트랩에서 닫을 수 있는 탭을 구현하는 방법

코드는 다음과 같습니다:

//子页面不用iframe，用div展示
var closableTab = {
    //添加tab
addTab:function(tabItem){ //tabItem = {id,name,url,closable}
 
var id = "tab_seed_" + tabItem.id;
var container ="tab_container_" + tabItem.id;
 
$("li[id^=tab_seed_]").removeClass("active");
$("div[id^=tab_container_]").removeClass("active");
 
if(!$(&#39;#&#39;+id)[0]){
var li_tab = &#39;<li role="presentation" class="" id="&#39;+id+&#39;"><a href="#&#39;+container+&#39;"  role="tab" data-toggle="tab" style="position: relative;padding:2px 20px 2px 15px">&#39;+tabItem.name;
if(tabItem.closable){
li_tab = li_tab + &#39;<i class="glyphicon glyphicon-remove small" tabclose="&#39;+id+&#39;" style="position: absolute;right:4px;top: 4px;"  οnclick="closableTab.closeTab(this)"></i></a></li> &#39;;
}else{
li_tab = li_tab + &#39;</a></li>&#39;;
}
var tabpanel = &#39;<div role="tabpanel" class="tab-pane" id="&#39;+container+&#39;" style="width: 100%;">&#39;+
      &#39;正在加载...&#39;+
       &#39;</div>&#39;;
 
 
$(&#39;.nav-tabs&#39;).append(li_tab);
$(&#39;.tab-content&#39;).append(tabpanel);
$(&#39;#&#39;+container).load(tabItem.url,function(response,status,xhr){
if(status==&#39;error&#39;){//status的值为success和error，如果error则显示一个错误页面
$(this).html(response);
}
});
}
$("#"+id).addClass("active");
$("#"+container).addClass("active");
},
 
//关闭tab
closeTab:function(item){
var val = $(item).attr(&#39;tabclose&#39;);
var containerId = "tab_container_"+val.substring(9);
       
       if($(&#39;#&#39;+containerId).hasClass(&#39;active&#39;)){
       $(&#39;#&#39;+val).prev().addClass(&#39;active&#39;);
       $(&#39;#&#39;+containerId).prev().addClass(&#39;active&#39;);
       }
 
 
$("#"+val).remove();
$("#"+containerId).remove();
}
}

로그인 후 복사

3. . 사용방법은 다음과 같습니다.

<div class="iframe_div_wrap">
        <!-- 此处是相关代码 -->
        <ul class="nav nav-tabs" role="tablist">
        </ul>
        <div class="tab-content" style="width:100%;">
        </div>
        <!-- 相关代码结束 -->
    </div>

로그인 후 복사