Question

我有两个按钮，分别是“关于我”和“项目”。我做了这样的事，无论我单击哪个按钮，它们都有自己的内容，显示为“在同一位置”。（在div之间切换）

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

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

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

这是您追求的 kinda 吗？ ...

IN

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

Answer 2

我认为@ 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>

在两个div之间切换，一旦打开就重置

2 个答案: