Как сделать вкладки в модальном окне?

Question

[ton1_rose]

Доброго времени суток дорогие друзья!
Пытаюсь сделать вкладки в модальном окне bootstrap'a хотел реализовать вкладки с помощью опять же bootstrap, но увы там слишком много классов получалось и из этого конфликты стилей и классов.
Решил воспользоваться готовыми снипетами вкладок, но видимо из за кривизны рук, возможно по другим причинам, ничего не выходит..)
Тоесть при клике на ссылку у меня будет выходить контент одной из вкладок.
вот так выглядят кнопки ->

<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 fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Название модали</h4>
      </div>
      <div class="modal-body">
        <!------ТЕЛО-------->   
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div>
  </div>
</div>

Вас уважаемые коллеги прошу помочь собрать рабочий код )
Так же будут интересны варианты вывода контента соответственно(при клике на ссылку №1 - контент ссылки №1)!, в модальном окне.

Answer 1

[Михаил Горячкин]

Ну тут есть два варианта, первый это выводить в окне контент для всех вкладок каждый в своем блоке и открывать изначально только первый. Тогда код будет примерно таким:

<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;
    });
});

Это так самый простой пример, вам сюда придется прикрутить как минимум кеширование содержимого табов, чтобы не делать запрос одного и того же контента.