02.04.2014, 10:10
|
 |
Аспирант
|
|
Регистрация: 10.02.2014
Сообщений: 34
|
|
|
Присвоить уникальный класс, очередность
Доброго времени суток!
Имею вот такую структуру кода:
<ul class="tabs">
<li class="i-tabs">
<a href="#">my_title</a>
<div>my_text</div>
</li>
<li class="i-tabs">
<a href="#">my_title</a>
<div>my_text</div>
</li>
<li class="i-tabs">
<a href="#">my_title</a>
<div>my_text</div>
</li
</ul>
Нужно скриптом добавить присвоить для каждого <li> свой уникальный класс, к примеру, что б получилось вот так:
<ul class="tabs">
<li class="i-tabs b-tabs-1">
<a href="#">my_title</a>
<div>my_text</div>
</li>
<li class="i-tabs b-tabs-2">
<a href="#">my_title</a>
<div>my_text</div>
</li>
<li class="i-tabs b-tabs-3">
<a href="#">my_title</a>
<div>my_text</div>
</li
</ul>
Подскажите как реализовать или в какую сторону копать!? Пытаюсь загуглить, а как правильно задать вопрос!?
Спасибо! |
|
02.04.2014, 10:23
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,201
|
|
|
Сообщение от RGBPlus
|
|
как реализовать или в какую сторону копать!?
|
Сторона тут одна...
- Пройтись по элементам в цикле
- Сформировать имя класса
- Присвоить тот класс элементу |
|
02.04.2014, 10:34
|
|
Аспирант
|
|
Регистрация: 10.02.2014
Сообщений: 34
|
|
|
Сообщение от ksa
|
Сторона тут одна...
- Пройтись по элементам в цикле
- Сформировать имя класса
- Присвоить тот класс элементу
|
Это я примерно понимаю, в смысле задачу, не понимаю выполнение, т.е. как это реализовать!? Можно пример кода или как правильно задать запрос в гугле, что б примеры реализации посмотреть, ну а дальше под себя подстроить.
в JavaScript не силен, так подправить под себя, но не написание с нуля. Спасибо. |
|
02.04.2014, 10:42
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,201
|
|
|
Сообщение от RGBPlus
|
|
в JavaScript не силен
|
Тогда гуглить бестолку...
Начни хоть с этого
http://learn.javascript.ru/
А в чем хоть силен-то?  |
|
02.04.2014, 11:06
|
|
Аспирант
|
|
Регистрация: 10.02.2014
Сообщений: 34
|
|
Я понимаю Ваше стремление показать/научить/что б разобрался сам, безусловно это интересно/нужно/полезно/обязательно, я вернусь к этому списку и прочту все, но на данный момент нужно сделать.
В чем силен, ммм ... могу придумать, нарисовать, сверстать, разбираюсь с MODx и т.д. я просто оставлю ссылку, но просьба не цитировать ее, ибо через пару часиков удалю ее _
п.с. надеюсь все же подскажете пример или запрос как реализовать. Спасибо
п.с. как раз на "Наши услуги" и нужно сделать уникальный класс для каждого элемента
Последний раз редактировалось RGBPlus, 02.04.2014 в 11:51.
|
|
02.04.2014, 11:33
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
|
RGBPlus,
а зачем вам уникальные классы?
|
|
02.04.2014, 11:38
|
|
Аспирант
|
|
Регистрация: 10.02.2014
Сообщений: 34
|
|
Сообщение от рони
|
RGBPlus,
а зачем вам уникальные классы?
|
у меня по дизайну идут скругленные углы (как верхнее меню) у первого и последнего переключателя вкладок, ну и последнего нет border-right: 1px solid #fff; как это реализовать без дополнительного класса не знаю.
Можно конечно, не всем указывать класс, а только первому и последнему, но опять же не знаю как это написать на JavaScript
п.с. в коде самого шаблона указать не могу, так как есть массивы с данными и для них один шаблон вывода, единственный путь скриптом присвоить класс принудительно.
Спасибо. |
|
02.04.2014, 11:50
|
|
Аспирант
|
|
Регистрация: 10.02.2014
Сообщений: 34
|
|
Твою ж та дивизию (бью себя по лбу), как я мог про это забыть!? Наверное потому что не пользуешься этим. Привыкли на CMS опираться, что автоматом тебе даст first да last, CSS рулит!
п.с. вот же блин, ни когда не ищем легких путей!
Всем спасибо за помощь! Ну и зелень в карму
п.с.с. но закладку все же сделал http://learn.javascript.ru/ будем читать по мере свободного времени п.с. этого всего нет, скажем в .chm !?
Последний раз редактировалось RGBPlus, 02.04.2014 в 11:54.
|
|
02.04.2014, 11:56
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
RGBPlus,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.tabs li{
float: left;
width: 100px;
border-bottom: #FF0000 2px solid;
border-top:#FF0000 2px solid;
list-style: none;
padding: 4px;
}
.tabs li:first-child{
border-left: #FF0000 2px solid;
border-radius: 8px 0 0 8px;
}
.tabs li:last-child{
border-right: #FF0000 2px solid;
border-radius:0 8px 8px 0;
}
</style>
</head>
<body>
<ul class="tabs">
<li class="i-tabs">
<a href="#">my_title</a>
<div>my_text</div>
</li>
<li class="i-tabs">
<a href="#">my_title</a>
<div>my_text</div>
</li>
<li class="i-tabs">
<a href="#">my_title</a>
<div>my_text</div>
</li>
</ul>
</body>
</html>
|
|
|
|
