Применять стиль при выборе

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

У меня есть небольшой скрипт, состоящий из кода:

 <script type="text/javascript">
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
</script>

И немного HTML:

 <a href="#admin" onclick="toggle_visibility('test').style.display='block';">Test Me</a>   
<br/>

<div id="test" style="display:none;">
    Hello there
</div>

Код делает так, что при нажатии на ссылку «Проверить меня» становится видимым, мне интересно, как сделать так, чтобы при нажатии на ссылку «Проверить меня» цвет текста менялся?

Ответ №1:

Что ж. Во-первых, вы видите, что значение onclick неверно. Функция вызывается toggle_... , затем она выполняет остальное. js-скрипт

 function toggle_visibility(id,$this) {
var e = document.getElementById(id);
if(e.style.display == 'block')
{
  $this.style.color = '';
  e.style.display = 'none';
}
else
{
   $this.style.color = 'gold';
   e.style.display = 'block';
}
}

и html-код

 <a href="#admin" onclick="toggle_visibility('test',this)">Test Me</a><br/>
<div id="test" style="display:none;">
   Hello there

Редактировать, я также добавил $this к элементу, на который был нажат.

1. Спасибо за сообщение, но вы на самом деле не ответили на вопрос — код, похоже, работает для меня. Я просто хотел узнать, как сделать так, чтобы текст «Test Me» менял цвет, когда он выбран, и <div id=»test»> был виден?

Ответ №2:

 onclick="javascript: jQuery('#test').css('color', 'red'); return false;"

1. Похоже, это не работает, даже когда я удаляю другой необходимый код.

2. Нет, это не работает, потому что @lynks ссылается на библиотеку javascript.

3. удалите display: none из вашего div, иначе он никогда не появится (мы переопределяем код, который заставляет его отображаться, кодом, который меняет его цвет). и переопределите onclick, который у вас уже есть, тем, который я предоставляю.

4. вопрос был помечен jquery, поэтому я предположил, что его можно будет использовать.

5. Скрипт jQuery фактически включен в HTML-документ, поэтому теоретически он должен был работать…