嘗試實現歷史記錄API的Javascript

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

實際錯誤不是“無法閱讀樣式”。 它是：

null不是對象（評估'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>