В этом уроке я покажу, как можно быстро сделать на вашей Web-странице динамический блок с закладками. Все, что вам будет нужно - это стандартный модуль jQuery и немного внимания при создании страницы. Ваш блок на странице может выглядеть примерно так, как на картинке, однако все зависит только от вашей фантазии.

1.  В разделе BODY вашей страницы введите несколько блоков DIV, например такие:
   
   

   <div id="tab_btns">
    <div class="btn1 active" data-id="1">Закладка 1</div>
    <div class="btn2" data-id="2">Закладка 2</div>
    <div class="btn3" data-id="3">Закладка 3</div>
   </div>
   <div id="cont">
    <div class="area area_1">
    <h3 align="center"><span>Joomla</span></h3>
   Содержимое поля первой вкладки...
    </div>
    <div class="area area_2 hide">
    Поле <span>второй</span> вкладки
    </div>
    <div class="area area_3 hide">
    Поле <span>третьей</span> вкладки
    </div>
   </div>

   В коде блоки DIV-вы  с классом btn1, btn2, btn3 выводят закладки, DIV  с классом cont  определяет область вывода текста, DIV-вы  с классом area area_1, area area_2, area area_3 содержат выводимый текст соответствующей закладки. 
   
   
2. В раздел HEAD вставьте следующие стили:
   
   

   #tab_btns {
    width: 521px;
    height: 40px; 
    }
    #tab_btns div {
    float: left; 
    width: 150px;
    padding: 10px 0px; 
    margin-right:5px;
    text-align: center;
    color: white; 
    font-weight: bold; 
    border: 1px solid #6DA1F3; 
    border-bottom: 0; 
    border-radius: 4px 4px 0 0;
    background: #7E9FE0; cursor: pointer; 
    }
    #tab_btns .active {
    color:#7e7e7e; 
    border-bottom: 0; 
    background: #eee; 
    }
    #cont {
    width: 514px;
    height: 300px;
    padding: 10px;
    border: 1px solid #6DA1F3;
    background: #eee; 
    border-radius: 0 0 4px 4px; }
    #cont .area {
    height: 300px; 
    padding-top: 5px; 
    text-align:justify;
    overflow: auto;
    } 
    #cont .area span {color:red;} 
    #cont .hide {display: none;}

   Тут вы можете изменять некоторые параметры по своему усмотрению в соответствии с дизайном своего сайта.
   
   
3. В раздел HEAD вставьте тег подключения библиотеки jQuery:
   
   

   <script type="text/javascript" src="/js/jquery-1.8.3.js"></script>

   
   
   Внимание! Библиотека должна находиться в папке js, иначе укажите правильный к ней путь.
   
   
4. Сохраните и проверьте работу скрипта.