尝试实现历史 API 的 Javascript

Question

所以，我试图将 history.go(-1) 存储到一个变量中以在函数中使用，但是当我执行它时，它给出了错误

unable to read style.

我将 CSS 用于动画并且一次只显示一个内容 block 。

function openChoice(evt, choiceName) {
  var i, tabcontent, tablinks, last;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(choiceName).style.display = "block";
  evt.currentTarget.className += " active";

  history.pushState(null, null, choiceName.split('/').pop());



}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

var bbac = history.go(-1);

body {
  font-family: "Haveltica", sans-serif;
}


/* Style the tab */

div.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

choice {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons inside the tab */

div.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tablinks {
  background-color: #f44336;
  border: none;
  color: G;
  font-weight: bold;
  padding: 10px 22px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
}


/* Change background color of buttons on hover */

div.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

div.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.tabcontent {
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
  /* Fading effect takes 1 second */
}

@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div class="tab">
  <button class="tablinks" onclick="openChoice(event, 'Slide1')" id="defaultOpen">Reset</button>
  <button class="tablinks" onclick="openChoice(event, bbac)">Back</button>
</div>
<!-- Enter KBA info in the next line add tabcontent to class="tabcontent" of div-->


<div id="Slide1" class="tabcontent">
  <h3>Title</h3>x
  <p>
    CONTENT OF SLIDE<br /><br />
    <button class="tablinks" onclick="openChoice(event, 'Slide2')">Slide2</button> <br /><br />
    <button class="tablinks" onclick="openChoice(event, 'Slide3')">Slide3</button> <br /><br />
  </p>
</div>
<div id="Slide2" class="tabcontent">
  <h3>Title 2</h3>
  <p>
    <h4>Having fun?</h4>
  </p>
</div>
<div id="Slide3" class="tabcontent">
  <h3>Title 3</h3>
  <p>
    <i>Image</i>
    <img src="null" />
  </p>
</div>

这是我目前所拥有的示例:

http://kbadesigner.tvgesports.com/TEST%20KBA25.html

我想要完成的是返回到上一张所选幻灯片的后退按钮。

谢谢，

Answer 1

实际错误不是“无法读取样式”。它是:

null is not an object (evaluating 'document.getElementById(choiceName).style')

choiceName 应该是一个 DOM ID，但实际上您已经将其放入其中:

 var bbac = history.go(-1);

...当您尝试对其调用 document.getElementById 时，它自然会返回 null。

这是对您的代码的重写，它使用 ID 数组而不是窗口历史记录对象。 (你用 jquery 标记了问题，所以为了方便我使用了它:)

var pastSlides = [];

var prevSlide = function() {
  if (pastSlides.length == 0) return;
  $('.tabcontent').hide();
  $('#'+pastSlides.pop()).show();
}

var openSlide = function(slide) {
  pastSlides.push($('.tabcontent:visible').attr("id"));
  $('.tabcontent').hide();
  $('#'+slide).show();
}

var resetSlides = function() {
  pastSlides = [];
  $('.tabcontent').hide();
  $('#Slide1').show();
}

resetSlides();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="tab">
  <button class="tablinks" onclick="resetSlides()" id="defaultOpen">Reset</button>
  <button class="tablinks" onclick="prevSlide()">Back</button>
</div>

<div id="Slide1" class="tabcontent">
  <h3>Title</h3>
  <p>CONTENT OF SLIDE</p>
    <button class="tablinks" onclick="openSlide('Slide2')">Two</button> 
    <button class="tablinks" onclick="openSlide('Slide3')">Three</button>
</div>
<div id="Slide2" class="tabcontent">
  <h3>Title 2</h3>
  <h4>Having fun?</h4>
    <button class="tablinks" onclick="openSlide('Slide1')">One</button> 
    <button class="tablinks" onclick="openSlide('Slide3')">Three</button>
</div>
<div id="Slide3" class="tabcontent">
  <h3>Title 3</h3>
  <p><i>Image</i></p>
    <button class="tablinks" onclick="openSlide('Slide1')">One</button> 
    <button class="tablinks" onclick="openSlide('Slide2')">Two</button>
</div>