Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   javascript через классы (https://javascript.ru/forum/dom-window/50383-javascript-cherez-klassy.html)

Shuryga 24.09.2014 07:56
javascript через классы
 
Парни подскажите. Есть такой вод код:

<html>

<head>
<style>
.sylka
{
   padding-top:10px;
   padding-bottom:10px;
}
</style>
</head>

<body>
   <a href='' class='sylka'>Подробнее</a>
   <a href='' class='sylka'>Подробнее</a>
   <a href='' class='sylka'>Подробнее</a>
   <a href='' class='sylka'>Подробнее</a>
</body>

</html>

Вобщем мне нужно чтоб у всех ссылок class менялся padding-top:11px; padding-bottom:9px;

Все никак не могу разобраться.

PS:Не ругаться за тупость. Заранее спасибо )

ksa 24.09.2014 08:27
Цитата:
Сообщение от Shuryga
Вобщем мне нужно чтоб у всех ссылок class менялся padding-top:11px; padding-bottom:9px;

Все никак не могу разобраться.
Как вариант сделать еще один селектор в ЦСС

.sylka.on {
   padding-top:11px;
   padding-bottom:9px;
}

И добавить класс on своим ссылкам...

Shuryga 24.09.2014 08:30
Хорошо но мне нужно чтоб изменение происходило при нажатии на одну из ссылок и менялась только та ссылка на которую нажали

ksa 24.09.2014 08:36
Цитата:
Сообщение от Shuryga
мне нужно чтоб изменение происходило при нажатии на одну из ссылок и менялась только та ссылка на которую нажали
Значит лови событие click и присваивай класс on "кликнутой" ссылке...

ksa 24.09.2014 08:40
Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
.sylka {
   padding-top:10px;
   padding-bottom:10px;
}
.sylka.on {
   padding-top:11px;
   padding-bottom:9px;
   color: green;
}
</style>
<script type='text/javascript'>
$(function (){
	$('.sylka').click(function (){
		$(this).toggleClass('on');
		return false;
	});
});
</script>
</head>
<body>
<a href='' class='sylka'>Подробнее</a>
<a href='' class='sylka'>Подробнее</a>
<a href='' class='sylka'>Подробнее</a>
<a href='' class='sylka'>Подробнее</a>
</body>
</html>
</html>

Shuryga 24.09.2014 09:03
Большое спасибо все работает)) большой палец уже поставил) и еще вопросик можно-ли не присваивать новый селектор а изменить паддинг прямо в js например : 
document.getElementById("vniz1pxzak").style.paddingTop="11px";

Только сдесь меняется по id а не по классу.ksa,

Safort 24.09.2014 10:12
Shuryga,
можно. Ты уже почти понял как это делается, только вместо getElementById используй getElementsByClassName, а лучше document.querySelecetor.

Shuryga 24.09.2014 10:26
прописываю так:
document.querySelecetor.('vopros-obshii-text').style.paddingTop = '11px';

помимо этого пробовал еще несолькими способами не выходит что не так?

Erolast 24.09.2014 10:54
Загляни в консоль ошибок.

Shuryga 24.09.2014 11:35
Прошу прощения, а это что и где находиться?

Safort 24.09.2014 11:58
Shuryga,
непростительно! В поисковике можно написать "консоль ошибок в браузере" и он ответит.
У тебя банальная синтаксическая ошибка/опечатка.

Shuryga 24.09.2014 12:42
Всем огромнейшее спасибо) все работает)Консоль нашел)


Часовой пояс GMT +3, время: 13:01.