OnClick список изменений стилей

Скажем, у меня есть простой список:OnClick список изменений стилей

<ul> 
    <li class="notClicked">1</li> 
    <li class="notClicked">2</li> 
    <li class="notClicked">3</li> 
    </ul>

Могу ли я OnClick одного «Ли» стилей изменения всех li-х, за исключением одного щелкнули?

Так что, если я нажимаю «Ли» номер 2, то список будет выглядеть следующим образом:

<ul> 
    <li class="notClicked">1</li> 
    <li class="clicked">2</li> 
    <li class="notClicked">3</li> 
    </ul>

Итак, если я нажму на первое «ли», то он будет щелкнул класс, в то время как другие будут notClicked.

В случае, если вы хотите играть с ним, вот jsbin: http://jsbin.com/ucuca4/edit

сделать либо в Prototype или простой JavaScript.

источник

2010-12-18 Yan

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <title></title> 
     <script language="JavaScript" type="text/javascript"> 
      /*<![CDATA[*/ 
      var Lst; 

      function CngClass(obj){ 
      if (Lst) Lst.className=''; 
      obj.className='Clicked'; 
      Lst=obj; 
      } 

      /*]]>*/ 
     </script> 
     <style> 
      .notClicked {color: black} 
      .Clicked {color: red} 
     </style> 
    </head> 

    <body> 
     <ul> 
      <li> 
       <a onclick="CngClass(this);" href="#" class="notClicked">1 
       </a> 
      </li> 
      <li> 
       <a onclick="CngClass(this);" href="#" class="notClicked">2 
       </a> 
      </li> 
      <li> 
       <a onclick="CngClass(this);" href="#" class="notClicked">3 
       </a> 
      </li> 
     </ul> 
    </body> 
</html>

источник

2010-12-18 09:53:35

Почему измените стиль другого? Вы можете изменить стиль элемента, на который был сделан щелчок.

Если да, то вы можете использовать JQuery для этого

Пример:

<li class = "notClicked">element 1</li> 
<li class = "notClicked">element 2</li> 
<li class = "notClicked">element 3</li> 

$('.notClicked').click(function() 
{ 
    $(this).addClass('active'); 
});

источник

2010-12-18 09:55:26 iamean888

, потому что мне нужно изменить другие тоже :) – Yan

Так что вы хотите, чтобы другие имеют различный класс также при элемент щелкнут? – iamean888

Да, как и в принятом ответе, спасибо за помощь, но – Yan

<script> 
    function changeClass(){ 
     document.getElementById("idElement").setAttribute("class", "Clicked"); 
    } 
</script> 

<ul> 
    <li class="notClicked" >1</li> 
    <li class="notClicked" onClick="changeClass()" id="idElement">2</li> 
    <li class="notClicked">3</li> 
</ul>

источник

2010-12-18 09:58:56

Изменение класса с использованием метода setAttribute не поддерживается в Internet Explorer 7 и ниже. Всегда работайте с атрибутом класса DOM. – duri

@Peter Mortensen: Я видел, что вы любите форматировать вопрос и отвечать хорошим образом. –

OnClick список изменений стилей

ответ

Смежные вопросы