Question

我需要在一个具有活动/非活动状态的链接上放置2种不同的操作，现在我只知道一次如何执行操作，例如：（活动）

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

我想在同一点击上有另一个点击（无效），有没有办法使它动态改变？标签不应更改，除了颜色（例如样式）外。

另一方面，如果我还可以显示活动项列表，那将是一件很棒的事情，

活动状态：状态一，状态二，状态...

Answer 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');
}

这将切换您的类，从而使您可以基于类更改链接的行为。 Active / Inactive或Class123 / Class456可以使用。

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

这是您的听众。单击时将应用classToggle函数。您可以使用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>

Answer 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>

Answer 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>

有没有办法在单个链路上具有活动/非活动状态？

3 个答案: