onClick изменить стили списка - PullRequest
Новая
       20

onClick изменить стили списка

2 голосов
/ 18 декабря 2010

Допустим, у меня есть простой список: 

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

Могу ли я на клике одного "li" изменить стили всех li, кроме одного, на который нажали?

Так что, если я нажму "li" номер 2, список будет выглядеть так: 

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

Так что, если я нажму первый «li», то он будет щелкнуть по классу, в то время как другие не будут нажаты.

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

Создать либо в Прототип , либо в обычном JavaScript.

Ответы [ 3 ]

2 голосов
/ 18 декабря 2010

Зачем менять стиль другого? Возможно, вы захотите изменить стиль элемента, по которому щелкнули.

Если это так, вы можете использовать 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');
});
2 голосов
/ 18 декабря 2010 
<!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>
1 голос
/ 18 декабря 2010 
<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>
...