How to bootstrap settings for each tab corresponds to one page

bootstrap tab if directly plugged directly into each page in a div option, you can use <object type = "text / html" data = "test.html"> or <iframe> tag, but the question will arise:

 

 

 

 See page can be limited to certain special little place, not display properly.

Solution: Use the manual to each jquery tab-pane in the Add Page

$(function () {
   // tabs数据
    var tabsData = [{
        "id": "company_regist_page",
        "url": "company_regist.html"
    },{
        "id": "collegeadmin_regist_page",
        "url": "collegeadmin_regist.html"
    },{
        "id": "collegestudent_regist_page",
        "url": "collegestudent_regist.html"
    },{
        "id": "judge_regist_page",
        "url": "judge_regist.html"
    }];
    the this
        console.log (() {function
    $ (tabsData) .each (iterate json arrays, loops add a click event tag//+ .id "---->" + the this .url); 
        $ ( "A [the href = '#" + the this . .id + "']") the bind ( 'the Click' , { 
            ID: the this .id, 
            URL: the this .url 
        }, tabsHandler); 
    }); 
}); 
function tabsHandler (Event) {
     var Data = the event.data; 
    showtabs (data.id, data.url); 
    return  to false ;    // stop a default tag corresponding 
} 

/ * ** 
 * activation tab tab and use asynchronous loading ajax content 
 * @param {Object} tabsId 
 * @param {Object} URL 
 * / 
function showTabs(tabsId, url) {
    $("a[href='#" + tabsId + "']").tab('show');
    var $tabContent = $('#' + tabsId);
    $tabContent.load(url);
}

html code:

<div class="nav-tabs-vertical">
    <ul class="nav nav-tabs nav-tabs-line" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#company_regist_page" aria-controls="company_regist_page" aria-selected="true">
                企业机构注册
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#collegeadmin_regist_page" aria-controls="collegeadmin_regist_page" aria-selected="false">
                高校负责人注册
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#collegestudent_regist_page" aria-controls="collegestudent_regist_page" aria-selected="false">
                高校学生注册
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#judge_regist_page" aria-controls="judge_regist_page" aria-selected="false">
                评委注册
            </a>
        </li>
    </ul>
    <div class="tab-content" id="regist_page">
        <div class="tab-pane active" id="company_regist_page" role="tabpanel">
        </div>
        <div class="tab-pane" id="collegeadmin_regist_page" role="tabpanel">
        </div>
        <div class="tab-pane" id="collegestudent_regist_page" role="tabpanel">
        </div>
        <div class="tab-pane" id="judge_regist_page" role="tabpanel">
        </div>
    </div>
</div>

Results of the: