javascript - 在两个 div 之间切换，打开后重置

Question

我有两个按钮，分别称为“关于我”和“项目”。我已经做到了，无论我点击哪个按钮，它们都有自己的内容显示“在同一个地方”。（在 div 之间切换）

我还实现了，一旦单击其中一个按钮，您就可以在显示或不显示内容之间切换。但是，我的问题是我希望能够在“关于我”和“项目”之间切换，并且总是显示它们的内容（当我在这两者之间切换时），并且只有在我单击同一个按钮两次时才隐藏它们的内容

我认为问题出在我的切换功能上，所以我将代码粘贴到这里。希望有人理解我的问题。

function toggleAbout() {
var showAbout = document.getElementById("aboutBtn");
var hideAbout = document.getElementById("aboutDiv");

showAbout.addEventListener('click', function () {
    hideAbout.classList.toggle("show");
  });
}

function toggleproject() {
var showproject = document.getElementById("projectBtn");
var hideproject = document.getElementById("projectDiv");

showproject.addEventListener('click', function () {
     hideproject.classList.toggle("show");
   });
 }

函数调用在 index.html 中进行

<button id="aboutmeBtn" class="btn" onclick="toggleAbout()"> About Me   </button>
<button id="ProjectBtn" class="btn" onclick="toggleproject()"> Project</button>

标签： javascript

Answer 1

这是你追求的那种东西吗？...

!function () {
  var aboutBtn = document.getElementById("aboutBtn");
  var projectBtn = document.getElementById("projectBtn");
  var aboutPage = document.getElementById("aboutDiv");
  var projectPage = document.getElementById("projectDiv");

  // The class name for visible elements.
  var showState = 'show';

  // The class name for hidden elements.
  var hideState = 'hide';

  // Boolean value to state if you wish to
  // automatically toggle between
  // the two elements.
  var toggle = false;

  // Forces the other element to be hidden.
  var hideOther = true;


  // Simply states if the provided element
  // is visible or not.
  var isVisible = function (el) {
    return el.className.toLowerCase().indexOf(showState) >= 0;
  };

  // Simple method to swap the visibility
  // state.
  var swapState = function (el, oel) {
    if (isVisible(el)) el.className = hideState;
    else el.className = showState;

    if (oel != null)
      if (el.className === showState) oel.className = hideState;
      else oel.className = showState;
  };

  var controller = function (el) {
    var me, other;

    // Simply workout which button has been pressed.
    if (el.getAttribute('id') === projectBtn.getAttribute('id')) {
      me = projectPage;
      other = aboutPage;
    } else {
      me = aboutPage;
      other = projectPage;
    }

    // If toggle is false.
    if (!toggle) swapState(me);
    else swapState(me, other);

    // Both wouldn't really work together,
    // at least to my knowledge.
    if (hideOther && !toggle) other.className = hideState;
  };

  // Simply bind the event handler.
  aboutBtn.addEventListener('click', function () { controller(aboutBtn); });
  projectBtn.addEventListener('click', function () { controller(projectBtn); });
}();

.show {
  display: block;
}

.hide {
  display: none;
}

#yourApp div {
  height: 100px;
  width: 100px;
}

#aboutDiv {
  background: pink;
}

#projectDiv {
  background: dodgerblue;
}

<div id="yourApp">
  <div id='aboutDiv' class='show'></div>
  <div id='projectDiv' class='hide'></div>
  
  <button id="aboutBtn">About</button>
  <button id="projectBtn">Project</button>
</div>