Question

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

无法阅读风格。

我正在使用CSS制作动画，并且一次只显示一个内容块。

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

实际错误不是＆＃34;无法读取样式。＆＃34;它是：

null不是对象（评估＆＃39; document.getElementById（choiceName）.style＆＃39;）

choiceName应该是一个DOM ID，但实际上你已将其放入其中：

 var bbac = history.go(-1);

...当你尝试在其上调用document.getElementById时，它自然会返回null。

这里重写了使用ID数组而不是窗口历史记录对象的代码。（你用jquery标记了这个问题，所以我为了方便起见使用了它：）

＆＃13;

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();

＆＃13;

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

＆＃13;

Javascript试图实现历史API

1 个答案: