부트 스트랩 버전 2 탭 드롭 다운을 만드는 방법은 무엇입니까?

Question

부트 스트랩 탭 2를 내리고 싶습니다. 여기에 제 코드를 제안 해주세요. 내가 MVC에서 사용하고 있습니다.

HTML

<div id="tabs" style="border: 0px; width:100%;"> 
    <ul id="uTabs">  
     <li><a href="#tabs-1"><strong>Teacher</strong></a></li> 
     <li><a href="#tabs-2"><strong>Student</strong></a></li> 
    </ul> 
    <div id="tabs-1" class="PageContent"> 
    </div> 
    <div id="tabs-2" class="PageContent"> 
    </div>  
</div> 

JS는

<script type="text/javascript"> 
    $(function() { 
     $tabs = $('#tabs').tabs(); 
     $tabs.tabs({select: function (event, ui) { 
       if (ui.index == 0 || ui.index == 1 || ui.index == 2) { 
       } 
       var url = $.data(ui.tab, 'load.tabs'); 
       if (url) { 
        location.href = url; 
        return false; 
       } 
       return true; 
      }}); 
    }); 
</script> 

Answer 1

당신이 사용할 수있는

부트 스트랩 - tabdrop.js

여기 https://github.com/jmschabdach/bootstrap-tabdrop

는이

      <ul class="nav nav-tabs"> 
            <li class="active"> 
             <a href="#tab_1_1" data-toggle="tab"> Home </a> 
            </li> 
            <li> 
             <a href="#tab_1_2" data-toggle="tab"> Profile </a> 
            </li> 
            <li class="dropdown"> 
             <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"> Dropdown 
              <i class="fa fa-angle-down"></i> 
             </a> 
             <ul class="dropdown-menu" role="menu"> 
              <li> 
               <a href="#tab_1_3" tabindex="-1" data-toggle="tab"> Option 1 </a> 
              </li> 
              <li> 
               <a href="#tab_1_4" tabindex="-1" data-toggle="tab"> Option 2 </a> 
              </li> 
              <li> 
               <a href="#tab_1_3" tabindex="-1" data-toggle="tab"> Option 3 </a> 
              </li> 
              <li> 
               <a href="#tab_1_4" tabindex="-1" data-toggle="tab"> Option 4 </a> 
              </li> 
             </ul> 
            </li> 
           </ul> 

처럼 사용할 수있는 다운로드 링크