Блог

Главная - Вопросы по программированию - Есть ли способ иметь активное / неактивное состояние по одной ссылке?

Есть ли способ иметь активное / неактивное состояние по одной ссылке?

#javascript

#javascript

Вопрос:

Мне нужно будет выполнить 2 разных действия по одной ссылке, которая будет иметь активное / неактивное состояние, прямо сейчас я знаю только, как сделать одно за раз, что-то вроде этого (active):

 <a href="#" onclick="ShowOneState('state_One', gameInstance);" style="active">State One</a>

И я хотел бы иметь другое состояние по тому же щелчку (неактивное), есть ли способ динамически изменять это? Метка не должна меняться, за исключением цвета, например, стиля.

С другой стороны, было бы здорово, если бы я мог также показать список активных элементов, что-то вроде:

Активные состояния: состояние один, состояние два, состояние …

Комментарии:

1. Изменение CSS-класса ссылки сделало бы это.

2. Вы можете выполнить только одно действие по ссылке, но, конечно, это действие может оценивать состояние ссылки и выполнять разные действия в соответствии с ним.

3. Привет, @John3136, не могли бы вы уточнить, пожалуйста? Я не совсем понимаю, что вы имеете в виду, и Google тоже не помогает, или, по крайней мере, не для меня.

Ответ №1:

Я рекомендую что-то другое, чем тег A, для того, что вы делаете. Я также рекомендую современный эквивалент onclick, прослушивателя событий. Я также рекомендую назначать и переключать класс.

 <a href="#" id="myElem" class="class123" style="active">State One</a>

Я удалил ваш onclick и поместил его в прослушиватель событий. Я добавил класс, так что вы можете переключать его. 

 function classToggle() {
    this.classList.toggle('class123');
    this.classList.toggle('class456');
}

Это переключает ваш класс, тем самым позволяя вам изменять поведение ссылки на основе класса. Активный / неактивный или Class123 / Class456 все, что вы хотите использовать, будет работать. 

 document.querySelector('#myDiv').addEventListener('click', classToggle);

Это ваш слушатель. Он применяет функцию Classstoggle при нажатии. Вы можете сделать это с помощью div / кнопки / чего угодно. Лично я бы изменил тег A на Div. 

 <div id="myElem" class="class123">click here</div>

И вот пример того, как этот материал работает и меняется в зависимости от переключения и классов. 

 function classToggle() {
    this.classList.toggle('class123');
    this.classList.toggle('class456');
    
}
document.querySelector('#myElem').addEventListener('click', classToggle);
document.querySelector('#myElem').addEventListener('click', mogrify);

function mogrify(){

if (document.querySelector('#myElem').classList.contains('class123')) {
    document.querySelector('#myElem').style.backgroundcolor = "#54C0FF"
 document.querySelector('#myElem').innerText = "State Two";
} else {
 document.querySelector('#myElem').style.backgroundcolor = "#FF8080"
  document.querySelector('#myElem').innerText = "State One";
}



}  
 .class123 {
    color: #f00;
}

.class456 {
    color: #00f;
}  
 <a href="#" id="myElem" class="class456" style="active">State One</a>

Ответ №2:

Я думаю, что у меня получилось, вот мой код, пожалуйста, дайте мне знать, если он достаточно хорош.

A href:

 <a href="#" onclick="toggleState(this)">State One</a>

js:

 <script>
function toggleState(a) { 

    if ( a.className === 'visible' ) {

        HideOneState('state_One', gameInstance);
        a.className = '';

    } else {

        ShowOneState('state_One', gameInstance);
        a.className = 'visible';

    }

}
</script>

Ответ №3:

у @shandoe2020 есть хороший ответ, но вот «старый способ», который тоже довольно легко понять. Его можно довольно легко адаптировать к ссылкам (или чему-либо еще).

 <!DOCTYPE html>
<html>
<head>
<style>
  .my-button { width:150px; height:150px; }
  .my-red { background-color:#ff0000; }
  .my-blue { background-color:#0000ff; }
</style>
<script>
/* toggle the state of my-red and my-blue class */
function toggle()
{
  /* yeah yeah, hardcoding the item to change is bad */
  var elem = document.getElementById("btn")
  elem.classList.toggle("my-red")
  elem.classList.toggle("my-blue")
}
</script>
</head>

<body>
  <div>
    <p><button id="btn" class="my-button my-red" onclick="toggle()">Button</button></p>
  </div>

</body>
</html>