Question

我正在做一个有点工作的个人网站，但我想改进我的代码以及它是如何完成的，所以我想做一个Toggle Button但是：

function toggle_visibility() {
  var l = document.getElementById('links');
  var p = document.getElementById('projects');

  if (l.style.display == 'inline' || p.style.display = '') {
    l.style.display = 'none';
    p.style.display = 'block';
  } else {
    l.style.display = 'inline';
    p.style.display = 'none';
  }
}

#links    { display: inline; }
#projects { display: none;   }

该网站的所有代码均可在此处找到： https://github.com/moonfz/moonfz.github.io

这仍然是我正在进行的项目， CSS 应尽快进行优化。我愿意接受其他建议。

Answer 1

我认为此代码可以帮助您。

.DispayButton {Display:none;}

<html>
<head>
</head>
  <body>
<input type=button id="links" text="Switch Mode" onclick="toggle_visibility()" class="" value="links">
<input type=button id="project" text="Switch Mode" onclick="toggle_visibility()" class="DispayButton" value="project">
  </body>
  </html>

matrix("{{1,2,3}, {4,5,6}}")

Answer 2

我只会使用此方法添加或删除类而不是修改类。对于将来所有代码及其目的明确分开的用户而言，这似乎更加清晰。如果不是，你可能会在css（YUK！）

中找到使用绝对值的人

Answer 3

您应该使用类而不是在元素上设置显示本身。然后你可以使用＆＃34; classList＆＃34;点击即可切换它们。以下是关于如何使用classList的快速写法：https://js-tricks.io/blog/how-to-toggle-a-class-in-pure-javascript

切换按钮可见性

3 个答案: