Ну тут есть два варианта, первый это выводить в окне контент для всех вкладок каждый в своем блоке и открывать изначально только первый. Тогда код будет примерно таким:
<ul class="menu">
<li><a href="#tab1" data-toggle="modal" data-target="#myModal">О Компании</a></li>
<li><a href="#tab2" data-toggle="modal" data-target="#myModal">Доставка и оплата</a></li>
<li><a href="#tab3" data-toggle="modal" data-target="#myModal">Наши гарантии</a></li>
</ul>
<div class="modal-body">
<div id="tab1" class="tab__content">Tab1</div>
<div id="tab2" class="tab__content">Tab2</div>
<div id="tab3" class="tab__content">Tab3</div>
</div>
JS:
$(document).ready(function () {
var allBlocks = $('.tab__content');
$(document).on('click', '.menu a', function () {
var el = $(this), id = el.attr('href');
allBlocks.css('display', 'none');
$('.modal-body').find(id).css('display', 'block');
return false;
});
});
Либо второй вариант, когда контент для каждого таба будет запрашиваться по средствам ajax запроса. Тогда вам будет нужен только один блок для вывода результата. Будет что-то вроде того:
<ul class="menu">
<li><a href="#tab1" data-toggle="modal" data-target="#myModal">О Компании</a></li>
<li><a href="#tab2" data-toggle="modal" data-target="#myModal">Доставка и оплата</a></li>
<li><a href="#tab3" data-toggle="modal" data-target="#myModal">Наши гарантии</a></li>
</ul>
<div class="modal-body">
<div id="tab-content">По дефолту контент первого таба</div>
</div>
JS:
$(document).ready(function () {
var target = $('#tab-content');
$(document).on('click', '.menu a', function () {
var el = $(this), id = el.attr('href');
//тут либо get либо post
$.post('url', {'tabid': id}, function (response) {
target.html(response);
});
return false;
});
});
Это так самый простой пример, вам сюда придется прикрутить как минимум кеширование содержимого табов, чтобы не делать запрос одного и того же контента.
