Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Ширина закладок / 25 сообщений из 35, страница 1 из 2
07.06.2013, 21:15
    #38291041
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
Здравствуйте на странице веба есть по горизонтальной линии закладки
их облагораживает код css
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
#tabs {
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
/*отступ сверху страницы*/
    margin-top: 10px;
/*размер шрифта слов в закладках - "ГЛАВНАЯ", СОВЕТ1", "СОВЕТ2", "БИБЛИОТЕКА", "ОБРАТНАЯ СВЯЗЬ"*/
	font-size: 12px;
    }



Но вот например закладка Главная и ширина самой закладки чуть больше справа и слева от текста внутри закладки, как эти расстояния уменьшать\увеличивать?
Спасибо
...
Рейтинг: 0 / 0
07.06.2013, 22:58
    #38291074
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
катастрофа,

из приведённого фрагмента думаю никак, так как ширина выставляется где-то во внешнем элементе (тут же width 100%, а значит его ограничивает что-то другое).
...
Рейтинг: 0 / 0
08.06.2013, 05:58
    #38291163
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
Програмёр, но у меня только один css файл и где и как искать?
...
Рейтинг: 0 / 0
08.06.2013, 12:09
    #38291226
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
катастрофаПрограмёр, но у меня только один css файл и где и как искать?

Скиньте вёрстку с этими табами сюда. Присмотрелся и понял, что скорее всего наоборот вложенным элементам ширина выставляется (ведь tabs - это id, а значит это контейнер для табов).

Вообщем скиньте вёрстку табов, иначе это пальцем в небо.
...
Рейтинг: 0 / 0
08.06.2013, 20:03
    #38291426
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
Програмёр,

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<ul id="tabs">

<li><a href="#" name="#tab1">Главная</a></li>

<li><a href="#" name="#tab2">Совет 1</a></li>

<li><a href="#" name="#tab3">Текст</a></li>

<li><a href="#" name="#tab4">Библиотека</a></li>

<li><a href="#" name="#tab5">Обратная связь</a></li>

</ul>
...
Рейтинг: 0 / 0
08.06.2013, 20:09
    #38291430
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
катастрофаПрограмёр,

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<ul id="tabs">

<li><a href="#" name="#tab1">Главная</a></li>

<li><a href="#" name="#tab2">Совет 1</a></li>

<li><a href="#" name="#tab3">Текст</a></li>

<li><a href="#" name="#tab4">Библиотека</a></li>

<li><a href="#" name="#tab5">Обратная связь</a></li>

</ul>



в css нету ничего по типу #tabs li или подобного?
для li обязательно где-то должно быть прописано или display: inline , или float: left. Иначе меню будет вертикальным... Есть какой-то стиль отдельно для li. В хроме несложно узнать нажав на пункте меню правую клавишу и выбрав "происпектировать элемент". Справа будет вкладка со стилями и там будет указанно какие селекторы применяются к данному элементу
...
Рейтинг: 0 / 0
08.06.2013, 20:29
    #38291440
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
Програмёр,
вот из этой оперы
Код: css
1.
2.
3.
4.
5.
6.
  #tabs li {
/*float - определяет, по какой стороне будет выравниваться элемент*/
    float: left;
/*если -5px нахлёст, если 5px расстояние между словами закладок ГЛАВНАЯ и СОВЕТ*/	
    margin: 0 -1px 0 0;
    }



но нужно
например закладка Главная и ширина самой закладки чуть больше справа и слева от текста внутри закладки, как эти расстояния уменьшать\увеличивать?
...
Рейтинг: 0 / 0
08.06.2013, 20:34
    #38291444
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
катастрофаПрограмёр,
вот из этой оперы
Код: css
1.
2.
3.
4.
5.
6.
  #tabs li {
/*float - определяет, по какой стороне будет выравниваться элемент*/
    float: left;
/*если -5px нахлёст, если 5px расстояние между словами закладок ГЛАВНАЯ и СОВЕТ*/	
    margin: 0 -1px 0 0;
    }



но нужно
например закладка Главная и ширина самой закладки чуть больше справа и слева от текста внутри закладки, как эти расстояния уменьшать\увеличивать?
Если просто уменьшить/увеличить, то можно для нужной закладки (li) прописать отдельный id (или класс) и поиграться в нём с margin и padding стилями... :) Я думал имеется ввиду что что-то не так с вёрсткой. То есть расстояние везде должно быть одинаковое, а оно разное... или типа того :)
...
Рейтинг: 0 / 0
08.06.2013, 20:41
    #38291447
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
Програмёр, попробую, отпишусь, спасибо
...
Рейтинг: 0 / 0
09.06.2013, 17:38
    #38291754
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
Програмёр,
создал от li1 до li5
Код: html
1.
<li id="li1"><a href="#" name="#tab1">Главная</a></li>


так?
а как потом в css
Код: css
1.
2.
3.
4.
/*селектор идентификатора, несколько селекторов идентификатора разделяются запятыми*/   
	#li1, #li2, #li3, #li4, #li5{

}


указать расстояние от начала самой закладки до начала надписи на закладке справа и слева?
...
Рейтинг: 0 / 0
12.06.2013, 05:16
    #38294854
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
сделал
Код: css
1.
2.
3.
4.
5.
/*селектор идентификатора, несколько селекторов идентификатора разделяются запятыми*/   
	#li1, #li2, #li3, #li4, #li5{
/*padding - набивка*/
    padding: 2em;
}



увеличилось расстояние между самими закладками, хотя я ранее думал, что за это отвечает
Код: css
1.
2.
3.
4.
5.
6.
  #tabs li {
/*float - определяет, по какой стороне будет выравниваться элемент*/
    float: left;
/*если -5px нахлёст, если 5px расстояние между словами закладок ГЛАВНАЯ и СОВЕТ*/	
    margin: 0 -1px 0 0;
    }


одним словом не взлетает ...
...
Рейтинг: 0 / 0
12.06.2013, 07:18
    #38294860
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
катастрофа,

Padding задаёт внутренние отступы. Так что что-то не так, например фон для пункто меню фиксированной ширины или он подкладывается не под li, а под <a> (что не есть нормально). Как уже говорил, для нормальной оценки нужен весь css.
...
Рейтинг: 0 / 0
12.06.2013, 18:07
    #38295288
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
Програмёр,
спасибо заранее, там и другую мысль проверил - не взлетело...
css

Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
/*селектор тега*/
	body {
/*background-color - цвет фона, burlywood - бежевый*/
    background-color: #deb887;
/*margin - край*/
	margin: 0;
/*padding - набивка*/
    padding: 0;
    }
	
/*селектор идентификатора, несколько селекторов идентификатора разделяются запятыми*/   
	#li1, #li2, #li3, #li4, #li5{
/*padding - набивка*/
    /*padding: 2em;*/
/*внутренний правый отступ между закладкой и надписью внутри её*/
	padding-right:  50px;
/*внутренний левый отступ между закладкой и надписью внутри её*/
	padding-left: 250px;
}

/*селектор идентификатора, несколько селекторов идентификатора разделяются запятыми*/   
	#selectorClassa1 {
	color: #d0ff00;
/*размер шрифта*/
	font-size: 25px;
/*регист текста - uppercase - верхний регистр, lowercase - нижний регистр, capitalize - каждая первая буква слова с большой буквы*/
    text-transform: uppercase;
/*выравнивание текста - left - влево, right - вправо, center - посредине, justify - по ширине*/
    text-align: center;
/*жирность шрифта, normal - нормальный, который установлен по умолчанию, bold - полужирный, жирность шрифта с шагом в 100 от 100 до 900*/
    font-weight: 900;  
	}
	
/*селектор идентификатора*/   
	#data {
	color: #d0ff00;
/*размер шрифта*/
	font-size: 20px;
/*text-indent отступ слева в пикселях*/
	text-indent: 5px;
/*наименование шрифта*/
	font-family: Arial;
/*жирность шрифта, normal - нормальный, который установлен по умолчанию, bold - полужирный, жирность шрифта с шагом в 100 от 100 до 900*/
    font-weight: 900;  
	}
	
/*селектор идентификатора, несколько селекторов идентификатора разделяются запятыми*/   
	#selectorClassa2, #selectorClassa4, #selectorClassa6, #selectorClassa66 , #selectorClassa666, #selectorClassa6666{
/*#0000ff - синий цвет*/
	color: #0000ff;
/*размер шрифта*/
	font-size: 20px;
/*text-indent отступ слева в пикселях*/
	text-indent: 5px;
/*наименование шрифта*/
	font-family: Arial;
}

/*селектор идентификатора, несколько селекторов идентификатора разделяются запятыми*/   
	#selectorClassa3, #selectorClassa5, #selectorClassa7{
/*#0000ff - синий цвет*/
	color: #0000ff;
/*размер шрифта*/
	font-size: 20px;
/*text-indent отступ слева в пикселях*/
	text-indent: 35px;
/*наименование шрифта*/
	font-family: Arial;
}

/*селектор идентификатора*/ 
    #tabs {
    overflow: hidden;
    width: 100%;
    margin: 0;
/*padding - набивка*/
    padding: 0;
    list-style: none;
/*отступ сверху страницы*/
    margin-top: 10px;
/*размер шрифта слов в закладках - "ГЛАВНАЯ" и т. д.*/
	font-size: 12px;
    }

    #tabs li {
/*float - определяет, по какой стороне будет выравниваться элемент*/
    float: left;
/*если -5px нахлёст, если 5px расстояние между словами закладок ГЛАВНАЯ и СОВЕТ*/	
    margin: 0 -1px 0 0;
    }

    #tabs a {
    float: left;
	position: relative;
/*padding - набивка*/
	padding: 0 40px;
    height: 0; 
	line-height: 30px;
/*регистр слова "СОВЕТ*"*/	
    text-transform: uppercase;
    text-decoration: none;
    border-right: 30px solid transparent;
    border-bottom: 30px solid;
	border-bottom-color: #777777;
/*opacity - определяет уровень прозрачности элемента веб-страницы
число из диапазона [0.0; 1.0]
значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности
допускается писать числа без нуля впереди, вида opacity: ".6"*/
    opacity: .9;
    filter: alpha(opacity=30);	  
    }

/*определяет стиль элемента при наведении на него курсора мыши*/
    #tabs a:hover,
    #tabs a:focus {
/*цвет при наведении на слово "СОВЕТ*"*/
    border-bottom-color: #2ac7e1;
    opacity: 1;
    filter: alpha(opacity=100);
    }

   #tabs a:focus {
/*удаляет заострённые концы*/
    outline: 0;
    }

	#tabs #current {
    z-index: 3;
/*цвет активной закладки #ffffff - white - белый*/	
    border-bottom-color: #ffffff;
    opacity: 1;
    filter: alpha(opacity=100);	  
    }
	
    #content {
/*цвет #ffffff - white - белый*/
    background: #ffffff;
    border-top: 2px solid #3d3d3d;
/*padding - набивка*/    
	padding: 2em;
/*width - ширина*/
/*ширина места каждой закладки*/
	width: 100%;
/*выравниваем по центру*/
    margin: auto; 
	position: relative;
    }

/*селектор идентификатора*/ 
    #content h2, #content h3, #content p {
    margin: 0 0 15px 0;
    } 

/*селектор идентификатора*/ 
    #div a{
    margin: 0 20px;
    }

/*селектор идентификатора, несколько селекторов идентификатора разделяются запятыми*/ 
/*в случае добавления закладок на сайте нужно добавить #tab6, #tab7 и так далее*/ 
    #tab1, #tab2, #tab3, #tab4 , #tab5{
/*наименование шрифта*/
	font-family: Arial;
/*размер шрифта*/
	font-size: 12px;
/*height - высота, высота в каждой закладке, она белого цвета, ниже следует цвет #deb887 - burlywood - бежевый цвет*/
/*height - высота отрегулирована при раскрытом сполере закладки СОВЕТ1*/	
	height: 1180px;
/*ширина текста в каждой закладке*/
    /*width: 50%;*/
	}

...
Рейтинг: 0 / 0
12.06.2013, 18:20
    #38295301
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
катастрофа,

так и подумал ))
яили он подкладывается не под li, а под <a> (что не есть нормально)
Так просто не делают обычно (ну, я бы не стал... так как строчные элементы плохо работают с paddin и margin в отличие от блочных (<li>)).

Итак... что Вам надо изменить: присвоить id не для <li> , а для <a> (ну и соответственно переназвать.... не "li1", "li2", а "a1", "a2" например). При выставлении для элементов <a> паддинга получите требуемый результат (только не забываем, что к ним уже применяется селектор #tabs a)
...
Рейтинг: 0 / 0
12.06.2013, 19:10
    #38295330
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
Програмёр, понял сделал с 1 до 5
Код: html
1.
<li><a id="a1" href="#" name="#tab1">Главная</a></li>


а эта мысль
только не забываем, что к ним уже применяется селектор #tabs a
как обходится?
потому, что

Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
/*селектор идентификатора, несколько селекторов идентификатора разделяются запятыми*/   
	#a1, #a2, #a3, #a4, #a5{
/*padding - набивка*/
    /*padding: 2em;*/
/*внутренний правый отступ между закладкой и надписью внутри её*/
	padding-right:  50px;
/*внутренний левый отступ между закладкой и надписью внутри её*/
	padding-left: 250px;
}



не взлетает
...
Рейтинг: 0 / 0
13.06.2013, 21:04
    #38296947
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
пожалуй апну тему, нужно доделать, пжл подскажите
...
Рейтинг: 0 / 0
13.06.2013, 21:09
    #38296952
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
катастрофаПрограмёр, понял сделал с 1 до 5
Код: html
1.
<li><a id="a1" href="#" name="#tab1">Главная</a></li>


а эта мысль
только не забываем, что к ним уже применяется селектор #tabs a
как обходится?
потому, что

Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
/*селектор идентификатора, несколько селекторов идентификатора разделяются запятыми*/   
	#a1, #a2, #a3, #a4, #a5{
/*padding - набивка*/
    /*padding: 2em;*/
/*внутренний правый отступ между закладкой и надписью внутри её*/
	padding-right:  50px;
/*внутренний левый отступ между закладкой и надписью внутри её*/
	padding-left: 250px;
}



не взлетает

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

Код: css
1.
padding-right:  50px !important;
...
Рейтинг: 0 / 0
13.06.2013, 21:26
    #38296961
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
Програмёр, ОК то что нужно, странно, что !important - в блокнот++ выделяет красным цветом, и всё распостраняется это на 4 из 5, на первую - нифига
???
...
Рейтинг: 0 / 0
13.06.2013, 21:28
    #38296962
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
и после нажатия на закладку они снова становятся прежнего размера
...
Рейтинг: 0 / 0
13.06.2013, 23:33
    #38297038
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
катастрофаи после нажатия на закладку они снова становятся прежнего размера

откройте хром (привычнее всего... самый информативный). Там на элементе, который выглядит "неправильно" кликните правой кнопкой и выберите "проинспектировать элемент". Внизу откроется вёрстка, а справа в углу (внизу) css стили, которые применяются к данному элементу. Там очень легко определяется что не так. Что-то могло снова перекрыть Ваш стиль (например автор данных закладок тоже пользовал !important, тогда этот компонент в помойку, а автору руки оторвать ). Или же выбранная закладка уже не является ссылкой, и потому созданный для неё селектор уже не применяется... в таком случае нужна вёрстка данной закладки, что бы подсказать.

Кстати, мне помочь конечно не сложно... но... думаю было бы быстрее и полезнее про css почитать. Там в принципе всё достаточно легко для понимания.
...
Рейтинг: 0 / 0
14.06.2013, 04:50
    #38297235
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
Програмёр, спасибо, информативно...
глянул там указано
Код: html
1.
<a id="current" href="#" name="#tab1">Главная</a>


а в коде
Код: html
1.
<a id="a1" href="#" name="#tab1">Главная</a>


почему такое отличие?
...
Рейтинг: 0 / 0
15.06.2013, 11:54
    #38298557
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
апну тему, потому как не пойму отличие id в коде и наяву
"current" "a1"
???
...
Рейтинг: 0 / 0
15.06.2013, 13:11
    #38298571
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
если предположить, что причина переименования скрипты, тогда как эти предпосылки на изменение в работе увидеть?
Я так понимаю скрипты где-то переименовывают a1 в current, но не встречается в коде current
??
...
Рейтинг: 0 / 0
16.06.2013, 11:51
    #38298924
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
нашёл следы в файле JS
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
 function resetTabs(){
        $("#content div").hide(); //Скрываем содержание
        $("#tabs a").attr("id",""); //Сбрасываем id      
    }
 
    var myUrl = window.location.href; //Получаем URL
    var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // Для localhost/tabs.html#tab2 myUrlTab = #tab2     
    var myUrlTabName = myUrlTab.substring(0,4); // Для выше приведённого примера myUrlTabName = #tab
 
    (function(){
        $("#content div").hide(); // Скрываем всё содержание при инициализации
        $("#tabs li:first a").attr("id","current"); // Активируем первую закладку
        $("#content div:first").fadeIn(); // Показываем содержание первой закладки
        
        $("#tabs a").on("click",function(e) {
            e.preventDefault();
            if ($(this).attr("id") == "current"){ //Определение текущей закладки
             return       
            }
            else{             
            resetTabs();
            $(this).attr("id","current"); // Активируем текущую закладку
            $($(this).attr('name')).fadeIn(); // Показываем содержание текущей закладки
            }
        });
 
        for (i = 1; i <= $("#tabs li").length; i++) {
          if (myUrlTab == myUrlTabName + i) {
              resetTabs();
              $("a[name='"+myUrlTab+"']").attr("id","current"); // Активируем закладку по url
              $(myUrlTab).fadeIn(); // Показываем содержание закладки
          }
        }
    })()



тогда css файл сделал
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
/*селектор идентификатора, несколько селекторов идентификатора разделяются запятыми*/ 
/*#current, потому, что при загрузке страницы id="a1" переименовывает в id="current", current - текущий*/  
    #a1, #a2, #a3, #a4, #a5, #current {
/*padding - набивка*/
    /*padding: 2em;*/
/*внутренний правый отступ между закладкой и надписью внутри её, important - важный*/
    padding-right:  5px !important;
/*внутренний левый отступ между закладкой и надписью внутри её*/
    padding-left: 55px !important;
}


при загрузке страницы всё хорошо, а после нажатия на вкладку код закладок становится
Код: css
1.
2.
3.
<a id="current" href="#" name="#tab1">Главная</a>
<a id="current" href="#" name="#tab2">Совет 1</a>
<a id="current" href="#" name="#tab3">Совет2</a>


и т.д. почему тогда код css не срабатывает?
...
Рейтинг: 0 / 0
16.06.2013, 12:57
    #38298949
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ширина закладок
катастрофа,

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
<html>
<head>
  <title>закладки</title>
  <style>
    .tabs ul{
      list-style: none;
      overflow: hidden;
      padding: 0px;
    }
    .tabs ul li{
      float: left;
      cursor: pointer;
      border: 1px solid red;
      padding: 3px 10px;
      background: grey;
    }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"
          type="text/javascript"></script>
</head>
<body>
  <div class="tabs_container">
    <div class="tabs">
      <ul>
        <li class="tab1" data-content="tab1">tab 1</li>
        <li class="tab2" data-content="tab2">tab 2</li>
        <li class="tab3" data-content="tab3">tab 3</li>
        <li class="tab4" data-content="tab4">tab 4</li>
        <li class="tab5" data-content="tab5">tab 5</li>
      </ul>
    </div>
    <div class="tabs_content">
      <div class="tab1_content">открыл первую вкладку</div>
      <div class="tab2_content">открыл вторую вкладку</div>
      <div class="tab3_content">открыл третью вкладку</div>
      <div class="tab4_content">открыл четвёртую вкладку</div>
      <div class="tab5_content">открыл пятую вкладку</div>
    </div>
  </div>
  <script type="text/javascript">
    $(".tabs ul li").click(function(){
      $(".tabs_content > div").hide();
      $("."+$(this).data('content')+"_content").fadeIn();
      window.location.hash=$(this).data('content');
    });
    $(".tabs_content > div").hide();
    $("."+(window.location.hash || "tab1")+"_content").fadeIn();
  </script>
</body>
</html>



Вот так за 10 минут пишется, а эту поделку школьников выкиньте в помойку ))

Со стилями надеюсь разберётесь?
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Ширина закладок / 25 сообщений из 35, страница 1 из 2
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]