在两个 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>

Answer 1

我认为@JO3-W3B-D3V 的解决方案有点复杂，所以我会尝试以不同的方式回答。

我认为您的问题是您在单击按钮时运行addEventListeners，但它应该在页面加载时运行。

我还取出了切换开关，而是手动更改了显示或隐藏的类。

试试这个：

var showAbout   = document.getElementById("aboutBtn");
var hideAbout   = document.getElementById("aboutDiv");
var showproject = document.getElementById("projectBtn");
var hideproject = document.getElementById("projectDiv");

showAbout.addEventListener('click', function () {
    if (hideAbout.classList == 'hide') {
        hideAbout.classList = 'show';
        hideproject.classList = 'hide';
    } else {
        hideAbout.classList = 'hide';
        hideproject.classList = 'hide';
    }
});

showproject.addEventListener('click', function () {
    if (hideproject.classList == 'hide') {
        hideproject.classList = 'show';
        hideAbout.classList = 'hide';
    } else {
        hideproject.classList = 'hide';
        hideAbout.classList = 'hide';
    }
});

.show {
  display: block;
}

.hide {
  display: none;
}

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

#aboutDiv {
  background-color: pink;
}

#projectDiv {
  background-color: dodgerblue;
}

#aboutBtn {
  background-color: pink
}

#projectBtn {
  background-color: dodgerblue
}

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

Answer 2

这是你所追求的有点吗？ ...

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