onclick & css
Ребят, мне нужна ваша помощь. Я хочу добавить следующуу функцию на свой сайт: при клике допустм, на ссылку в определенном месте должен появится блок.
Например, <span onclick="<!--css код-->>Click me</span>. Даже не обязательно так,но чтобы скрипт выполнял задачу.В css коде должен быть примерно такой код: .block { left:44px; } . Изначальное положение блока: .block { position:absolute; left:10px; top:10px;} . Ну, как-то так. Если нужны будут уточнение - спрашивайте.:help: |
<span onclick="$('.block').css('left', '44px')"></span>
|
как вариант:
<div onclick="this.setAttribute('class', 'myclass');">траляля</div>
класс myclass заранее описать в цсс стилях |
а лучше так:
var addClass = function(obj, cls)
{
var cl = obj.className.split(' ');
for(var i = 0; i < cl.length; i++)
if (cl[i] == cls)
return;
cl.push(cls);
obj.className = cl.join(' ');
}
var removeClass = function(obj, cls)
{
var cl = obj.className.split(' ');
for(var i = 0; i < cl.length; i++)
if (cl[i] == cls)
{
cl.splice(i, 1);
break;
}
obj.className = cl.join(' ');
}
<div onclick="addClass(this, 'myclass');">траляля</div> |
Тоже есть вопрос по поводу onclick и css
Сделал на сайте увеличение шрифта следующим образом <ul>
<li onclick="document.getElementById('idblock').className = 'classFirst';">Маленький</li>
<li onclick="document.getElementById('idblock').className = 'classSecond';">Средний</li>
<li onclick="document.getElementById('idblock').className = 'classThird';">Большой</li>
</ul>
<div id="idblock" class="classFirst">Текст Текст Текст Текст Текст </div>
Можно ли при помощи css менять стили именно тех элементов "Маленький, Средний, Большой" которые на данный момент активны. Допустим по умолчанию загружается "Маленький" то эта надпись была бы красной, а при переключении красным становилась бы та надпись, которую переключили. |
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.activeLi {
color: red;
}
</style>
</head>
<body>
<ul>
<li class="fontSelect activeLi" onclick="document.getElementById('idblock').className = 'classFirst';">Маленький</li>
<li class="fontSelect" onclick="document.getElementById('idblock').className = 'classSecond';">Средний</li>
<li class="fontSelect" onclick="document.getElementById('idblock').className = 'classThird';">Большой</li>
</ul>
<div id="idblock" class="classFirst">Текст Текст Текст Текст Текст </div>
<script>
(function() {
var lis = document.querySelectorAll('.fontSelect');
function highlightActive() {
for(var i = 0; i < lis.length; i++) lis[i].className = 'fontSelect';
this.className += ' activeLi';
}
for(var i = 0; i < lis.length; i++) lis[i].addEventListener('click', highlightActive);
})();
</script>
</body>
</html>
|
Спасибо=)
|
| Часовой пояс GMT +3, время: 08:18. |