Закладки являются одним из важных элементов интерфейса пользователя. Здесь мы сделаем динамические закладки с использованием jQuery.  В библиотеке JQuery UI имеется функционал для организации закладок, но возможностей для динамического добавления/удаления нет. Здесь используются закладки на основе тега li. Методика очень проста, когда создается закладка, для нее генерируется id с помощью переменной счетчика, а также создается элемент содержания, который также соответствует счетчику.

HTML

Разметка представляет собой контейнер, в котором  имеется единственный элемент li, содержащий кнопку добавления закладки.
1
<ul id="tabul">
2 <li id="litab" class="ntabs add"><a href="" id="addtab">+</a></li>
3 </ul>
4 <div id="tabcontent"></div>

jQuery

Если мы говорим о динамическом элементе, то его нужно создавать на лету. В данном случае речь идет о новой закладке и новом элементе содержания. В функции addtab привязывается обработчик к событию “click”, чтобы обеспечить работу элементов, созданных на лету.
01
$(function() {
02 var total_tabs = 0;
03
04 // Инициализируем первую закладку
05 total_tabs++;
06 addtab(total_tabs);
07
08 $("#addtab, #litab").click(function() {
09 total_tabs++;
10 $("#tabcontent p").hide();
11 addtab(total_tabs);
12 return false;
13 });
14
15 function addtab(count) {
16 var closetab = '<a href="" id="close'+count+'">&times;</a>';
17 $("#tabul").append('<li id="t'+count+'">Закладка №'+count+'&nbsp;&nbsp;'+closetab+'</li>');
18 $("#tabcontent").append('<p id="c'+count+'">Содержание закладки № '+count+'</p>');
19
20 $("#tabul li").removeClass("ctab");
21 $("#t"+count).addClass("ctab");
22
23 $("#t"+count).bind("click", function() {
24 $("#tabul li").removeClass("ctab");
25 $("#t"+count).addClass("ctab");
26 $("#tabcontent p").hide();
27 $("#c"+count).fadeIn('slow');
28 });
29
30 $("#close"+count).bind("click", function() {
31 // Активируем предыдущую закладку
32 $("#tabul li").removeClass("ctab");
33 $("#tabcontent p").hide();
34 $(this).parent().prev().addClass("ctab");
35 $("#c"+count).prev().fadeIn('slow');
36
37 $(this).parent().remove();
38 $("#c"+count).remove();
39 return false;
40 });
41 }
42
});

CSS

01
#tabul {
02 padding: 0;
03 margin: 0;
04 padding: 5px 0;
05 }
06 #tabul li {
07 display: inline;
08 -webkit-border-radius: .3em .3em 0 0;
09 -moz-border-radius: .3em .3em 0 0;
10 border-radius: .3em .3em 0 0;
11 cursor: pointer;
12 }
13 .ntabs {
14 background: #BDC7D5;
15 margin-right: 1px;
16 font-size: 11px;
17 font-weight: bold;
18 color: #333;
19 border: 1px solid #BDC7D5;
20 padding: 5px 3px 5px 8px;
21 }
22 .add {
23 padding: 5px 8px;
24 }
25 #addtab {
26 font-size: 16px;
27 text-decoration: none;
28 position: relative;
29 top: 2px;
30 color: #333;
31 }
32 #addtab:hover {
33 color: #999;
34 }
35 .ctab {
36 background: #E7EDF6;
37 position: relative;
38 top: 2px;
39 border-bottom-width: 0;
40 }
41 .close {
42 text-decoration: none;
43 color: #999;
44 font-weight: bold;
45 font-size: 14px;
46 padding: 0 4px;
47 -webkit-border-radius: .2em;
48 -moz-border-radius: .2em;
49 border-radius: .2em;
50 }
51 .close:hover {
52 background: #999;
53 color: #333;
54 }
55 #tabcontent {
56 border: 1px solid #BDC7D5;
57 background: #E7EDF6;
58 padding: 10px;
59 text-align: center;
60 font-weight: bold;
61 color: #666;
62 font-size: 24px;
63 }
Готово! Вы можете поместить закладку в элемент div и показывать ее как скрытое содержание. Тег ul расширяется динамически, поэтому количество добавляемых закладок не ограничено. Можно добавить кнопки навигации по закладкам и задействовать свойство CSS left. Динамические закладки