How to make newsgroup from other Navs Bootstrap tabs in AJAX?

Question

JavaScript

I don’t know how to do it ...
It is necessary that other tabs do not load news until they switch to them!
And the news feed from other tabs was only there when switching to a tab!
Help me please! Otherwise, the site is very loaded, and when you enter the site, it takes a long time to load, because more than 50-60 news are loaded from each tab!

$(function() {
$('ul.tabs_caption').on('click', 'li:not(.active)', function() {
$(this).addClass('active').siblings().removeClass('active').closest('div.tabs').children('div.tabs_content').removeClass('active').eq($(this).index()).addClass('active');
});
});

<div class="tabs">
        <ul class="tabs__caption" id="nav_btns">
            <li class="active">
                <div class="btn_selection"><span>Меню 1</span></div>
            </li>
            <li>
                <div class="btn_selection"><span>Меню 2</span></div>
            </li>
            <li>
                <div class="btn_selection"><span>Меню 3</span></div>
            </li>
            <li>
                <div class="btn_selection"><span>Меню 4</span></div>
            </li>
            <li>
                <div class="btn_selection"><span>Меню 5</span></div>
            </li>
            <li>
                <div class="btn_selection"><span>Меню 6</span></div>
            </li>
        </ul>
        <div class="tabs__content active">
            {custom category="8-11" template="shortstory" order="date" sort="asc" cache="yes" limit="1000"}
        </div>
        <div class="tabs__content">
            {custom category="8" template="shortstory" order="date" sort="asc" cache="yes" limit="1000"}
        </div>
        <div class="tabs__content">
            {custom category="9" template="shortstory" order="date" sort="asc" cache="yes" limit="1000"}
        </div>
        <div class="tabs__content">
            {custom category="10" template="shortstory" order="date" sort="asc" cache="yes" limit="1000"}
        </div>
        <div class="tabs__content">
            {custom category="11" template="shortstory" order="date" sort="asc" cache="yes" limit="1000"}
        </div>
        <div class="tabs__content">
            {custom category="7" template="shortstory" order="date" sort="asc" cache="yes" limit="1000"}
        </div>
    </div>

Answer 1

Go to the bootstrap dock in the navs section and at the very bottom they usually write how to catch events and what they are called, and when you catch the tab switching event, send ajax to the server and pull the news from the database and insert this data into this nav (wrapping in html naturally for beauty), or you can just hang up a click event on the tab yourself and then load the data into the tab with Ajax.