0

Помогите, пожалуйста, как сделать что б тег <p> по событию onclick выполнял эту строчку из таблицы стилей: #k li ul{position: relative; left: 0; white-space:nowrap; display:block;}. Хтмл код выглядит так:

 <ul id="k">
    <li>
        <p onclick="hide">Курсы валют</p>
        <ul>
            <li>JJJJJ</li>
        </ul>
    </li>
  </ul>

Слеши и теги ul li у меня стоят нормально, изменил чтоб нормально отображалось. Помогите, как это сделать. Хочу сделать скрытие по клику.

1
  • 1
    @Pheo, Чтобы отформатировать код, выделите его мышью и нажмите на кнопку 101010 редактора.
    – Artem
    Commented 2 мар. 2012 в 6:41

2 ответа 2

1

Вам здесь jQuery в самый раз подойдет. Используйте метод jQuery:

$(selector).addClass('<имя класса из таблицы CSS>')

UPD:

Так вот чтобы юзать мощь jQuery, который, собственно, и написан на JS, можно не знать яваскрипт вовсе! Единственно, что надо сделать для пользования фреймворком - подключить библиотеку jQuery. Вот, как подключается библиотека:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"
type="text/javascript"></script>

Теперь пишем можно пользоваться jQuery. Как его юзать, смотрите на русскоязычном ресурсе - jQuery.

6
  • А можно поподробнее пожалуйста
    – Pheo
    Commented 2 мар. 2012 в 6:54
  • С фреймворком jQuery знакомы? Если нет, то знакомы хотя бы с JS ?
    – AseN
    Commented 2 мар. 2012 в 6:57
  • Знаком с js, но очень посредственно
    – Pheo
    Commented 2 мар. 2012 в 6:59
  • Дополнил ответ =)
    – AseN
    Commented 2 мар. 2012 в 7:07
  • Огромное спасибо, буду разбираться =)
    – Pheo
    Commented 2 мар. 2012 в 7:10
1

Ol' dirty trick:

<p onclick="func()">Курсы валют</p>

<script>
function func(){
    if(!document.getElementById('newStyle')){
        var s = document.createElement('style');
        s.rel = 'stylesheet';
        s.type = 'text/css';
        s.id = 'newStyle';
        s.appendChild(document.createTextNode('#k li ul{position: relative; left: 0; white-space:nowrap; display:block;}'));
        document.getElementsByTagName('head')[0].appendChild(s);
    }
}
</script>

Правда, этот способ выполнится всего один раз.

Добавлено
Если надо, то на quirksmode есть функция проверки стиля элемента. Входящие значения: id элемента и css-свойство (не camel-case).

function getStyle(el, styleProp){
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}
2
  • Огромное спасибо! А можно ли добавить проверку? Чтоб когда уже кликнули и left такой-то, он меняет стиль на: #k ul {position:absolute; left:-9999px;}?
    – Pheo
    Commented 2 мар. 2012 в 7:40
  • Добавлено к ответу.
    – ling
    Commented 2 мар. 2012 в 8:26

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.