When the browser back button is clicked, conceal the current div and reveal the previously hidden div

Question

When the browser back button is clicked, conceal the current div and reveal the previously hidden div

I'm faced with a situation where my website consists of multiple pages which I've achieved by displaying and hiding divs within a single html file. The issue I'm encountering is that the browser's back and forward buttons aren't functioning as expected due to this method. I'm wondering if there's a way to link these browser buttons to my jQuery show/hide functions. For instance, when clicking the back button in the browser, I want the current div to hide and the previous div to show. Can this be accomplished using just jQuery, HTML, and CSS?

javascript jquery html css

Answer 1

Answer №1

After analyzing your code snippet, it seems like you are attempting to create a functionality where clicking on certain elements triggers navigation between different pages. The script uses the jQuery method .click() to toggle visibility of specific divs representing different pages based on their IDs. By incrementing or decrementing the current page number, the script calculates the target page ID and then shows or hides the corresponding page accordingly.

$(document).ready(function() {
  var page = 1; //current page
  $('#pg2').hide();
  $('#pg3').hide();
  $('#fwd').click(function() {
    var currentPage = "#pg" + page.toString();
    $(currentPage).hide();
    page++;
    var nextPage = "#pg" + page.toString();
    $(nextPage).show();
  });
  $('#bck').click(function() {
    var currentPage = "#pg" + page.toString();
    $(currentPage).hide();
    page--;
    var nextPage = "#pg" + page.toString();
    $(nextPage).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="bck">back</button>
<button id="fwd">forward</button>
<div id="pg1"><p>page 1</p></div>
<div id="pg2"><p>page 2</p></div>
<div id="pg3"><p>page 3</p></div>

Answer 2

After analyzing your code snippet, it seems like you are attempting to create a functionality where clicking on certain elements triggers navigation between different pages. The script uses the jQuery method .click() to toggle visibility of specific divs representing different pages based on their IDs. By incrementing or decrementing the current page number, the script calculates the target page ID and then shows or hides the corresponding page accordingly.

$(document).ready(function() {
  var page = 1; //current page
  $('#pg2').hide();
  $('#pg3').hide();
  $('#fwd').click(function() {
    var currentPage = "#pg" + page.toString();
    $(currentPage).hide();
    page++;
    var nextPage = "#pg" + page.toString();
    $(nextPage).show();
  });
  $('#bck').click(function() {
    var currentPage = "#pg" + page.toString();
    $(currentPage).hide();
    page--;
    var nextPage = "#pg" + page.toString();
    $(nextPage).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="bck">back</button>
<button id="fwd">forward</button>
<div id="pg1"><p>page 1</p></div>
<div id="pg2"><p>page 2</p></div>
<div id="pg3"><p>page 3</p></div>

When the browser back button is clicked, conceal the current div and reveal the previously hidden div

Answer №1

Similar questions

How to trigger a forced download of a .csv file instead of displaying it in the browser using HTML

Adding double quotes, where they haven't been added yet

Synchronous async routes in Node Express

Can you use AJAX to retrieve the same URL in both HTTP and HTTPS protocols?

Having difficulty with Angular's ng-options feature in a Select element

authorization for certain express routes using passport.js

Styling and scripting with CSS and jQuery in an external JavaScript file

What occurs when a function component is passed as a state variable?

I need to inform users that this application is not accessible on devices with small screens

Place a user input field within a div element having the specified class

Seeking an AJAX jQuery method for retrieving the values of four fields and transmitting them to the server

Enhance your SVG image in D3 by incorporating a drop-shadow effect

Background image that covers the entire screen, div elements that scroll on top of the landing screen initially

What is the method for generating three inputs simultaneously in a single line?

unique HTML elements located inside a text box

Accessing Session Objects in Struts2 Using a Different Session Object as a Key

Tips for successfully transferring values or parameters within the Bootstrap modal

Are there any reliable PHP classes available to generate HTML tables efficiently?

A guide to turning off tab discarding in Google Chrome with JavaScript

Re-activate video playback after 30 seconds of user inactivity (using RxJs)