изменить класс div / link по клику на js - проблемы

Question

Разобрался, как изменить класс div / link / любой другой щелчок с JS.Вот короткая демонстрация: http://nerdi.net/classchangetest.html

Теперь я пытаюсь выяснить, как я могу вернуть ранее нажатую ссылку в ее старый класс (или «деактивировать») при нажатии на новую ссылку.

Есть идеи?Спасибо!

Answer 1

function changeCssClass(ele, add_class) {
    // if add_class is not passed, revert
    // to old className (if present)
    if (typeof add_class == 'undefined') {
        ele.className = typeof ele._prevClassName != 'undefined' ? ele._prevClassName : '';
    } else {
        ele._prevClassName = ele.className || '';
        ele.className = add_class;
    }
}

Попробуйте здесь: http://jsfiddle.net/Zn7BL/

Используйте его:

// add "withClass"
changeCssClass(document.getElementById('test'), 'withClass');

// revert to original
changeCssClass(document.getElementById('test'));

Answer 2

Гораздо лучше разместить ваш код здесь, так как это облегчает тем, кто читает вопрос, и другим, которые ищут позже.Связанные примеры ненадежны и, вероятно, не будут сохраняться долго.

Копирование по ссылке (и форматирование для публикации):

<style type="text/css">
.redText, .blueText { font-family: Arial; }
.redText  { color : red;  } 
.blueText { color : blue; }
</style>

<script language="javascript" type="text/javascript">

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

    function changeCssClass(navlink)

Атрибут класса HTML не предназначен для CSS, он используется для группировки элементов.Лучшее имя может быть changeClassName .

    {
        if(document.getElementById(navlink).className=='redText')
        {
            document.getElementById(navlink).className = 'blueText';
        }
        else
        {
            document.getElementById(navlink).className = 'redText';
        }
    }

</script>

<a href="#" onclick="changeCssClass('navlink')" id="navlink" class="redText">Link 1</a><br><br>

При вызове функции, связанной со встроенным слушателем, будет установлено ключевое слово this для элемента, поэтомуВы можете вызвать функцию как:

<a ... onclick="changeCssClass(this);" ...>

Тогда вам не нужно передавать идентификатор, и вам не нужно getElementById в функции.

Вы можетерассмотрим функцию, которая «переключает» класс: добавляя его, если его нет, или удаляя, если он есть.Вам нужно написать несколько небольших функций, таких как hasClass , addClass и removeClass , тогда ваш слушатель может быть:

function toggleClass(el, className) {
  if (hasClass(el, className) {
    removeClass(el, className);
  } else {
    addClass(el, className);
  }
}

Тогданазначьте своим ссылкам стиль по умолчанию, используя правило стиля (т. е. примените стиль redText ко всем ссылкам), затем просто добавьте и удалите класс blueText .

Вы можететакже рассмотрите возможность размещения единственной функции в родительском элементе ссылок для обработки щелчков по элементам A, т. е. делегирования событий.

Answer 3

function changeCssClass(navlink)
{
    var links=document.getElementsByTagName('a');
    for(var i=0, n=links.length; i<n; i++)
    {
         links[i].className='redText';
    }
    document.getElementById(navlink).className = 'blueText';
}

С этим кодом все ссылки будут красными, а нажатие будет синим.

Надеюсь, это будет полезно.