Navigating through pages without using Javascript

Question

Navigating through pages without using Javascript

While working on creating page numbers, I stumbled upon this intriguing CodePen: https://codepen.io/p-ziegler/pen/bmdaaN

.b,
input[type="radio"] {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.b {
    background-color: gray;
    text-align: center;
    color: white;
}

input[type="radio"] {
    opacity: 0.01;
    margin-left: -16px;
    cursor: pointer;
}

.p {
    display: none;
}

#p1:checked ~ .p1,
#p2:checked ~ .p2,
#p3:checked ~ .p3 {
    display: block;
}

<div>
    <div class="b">1</div><input type="radio" name="p" id="p1" checked>
    <div class="b">2</div><input type="radio" name="p" id="p2">
    <div class="b">3</div><input type="radio" name="p" id="p3">
    <div class="p p1">Page 1</div>
    <div class="p p2">Page 2</div>
    <div class="p p3">Page 3</div>
</div>

One notable aspect is that Javascript isn't necessary for this. However, I encountered a problem when attempting to relocate the page numbers to the bottom below the content while placing the content above the number set. Upon making this change, all the contents vanished. Any guidance on how to resolve this issue would be greatly appreciated.

html css pagination

Answer 1

Answer №1

Instead of relying on radio inputs to manage routes, a more efficient approach is to use the :target pseudo class in CSS. This method eliminates the concern for the source order of your HTML elements.

One drawback of this solution is handling the default page. Below is a functional code snippet demonstrating how to set a default page (Home) using CSS:

/* Hide all sections by default */
section {
    display: none;
}
/* Display Home section by default */
#page1 {
    display: block;
}
/* Show targeted section */
section:target {
    display: block;
}
/* Hide siblings of the targeted section that are designated as default */
section:target ~ #page1 {
    display: none;
}

/* Styling */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
nav ul li {
    display: inline-block;
}
nav ul li a {
    background: gray;
    color: white;
    padding: 0.25rem;
    text-decoration: none;
}

<!DOCTYPE html>
<html>
<head>
    <title>CSS only SPA</title>
</head>
<body>
    <nav>
        <ul>
            <li>
                <a href="#page1">1</a>
            </li>
            <li>
                <a href="#page2">2</a>
            </li>
            <li>
                <a href="#page3">3</a>
            </li>
        </ul>
    </nav>

    <main>
        <section id="page3">
            <h1>Page 3</h1>
            <p>
                Proin ante arcu, hendrerit ac diam sagittis, sollicitudin posuere ante. Etiam egestas eros at nunc venenatis eleifend eu at tellus.
            </p>
        </section>

        <section id="page2">
            <h1>Page 2</h1>
            <p>
                Integer porttitor vitae est vel suscipit. Fusce placerat justo at libero aliquam maximus.
            </p>
        </section>
        
        <section id="page1">
            <h1>Page 1</h1>
            <p>
                Ut aliquet sit amet urna non porta. Maecenas dignissim, sem eget pulvinar luctus, ex dolor posuere magna, ut elementum quam eros vel nulla.
            </p>
        </section>
    </main>
</body>
</html>

Answer 2

Instead of relying on radio inputs to manage routes, a more efficient approach is to use the :target pseudo class in CSS. This method eliminates the concern for the source order of your HTML elements.

One drawback of this solution is handling the default page. Below is a functional code snippet demonstrating how to set a default page (Home) using CSS:

/* Hide all sections by default */
section {
    display: none;
}
/* Display Home section by default */
#page1 {
    display: block;
}
/* Show targeted section */
section:target {
    display: block;
}
/* Hide siblings of the targeted section that are designated as default */
section:target ~ #page1 {
    display: none;
}

/* Styling */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
nav ul li {
    display: inline-block;
}
nav ul li a {
    background: gray;
    color: white;
    padding: 0.25rem;
    text-decoration: none;
}

<!DOCTYPE html>
<html>
<head>
    <title>CSS only SPA</title>
</head>
<body>
    <nav>
        <ul>
            <li>
                <a href="#page1">1</a>
            </li>
            <li>
                <a href="#page2">2</a>
            </li>
            <li>
                <a href="#page3">3</a>
            </li>
        </ul>
    </nav>

    <main>
        <section id="page3">
            <h1>Page 3</h1>
            <p>
                Proin ante arcu, hendrerit ac diam sagittis, sollicitudin posuere ante. Etiam egestas eros at nunc venenatis eleifend eu at tellus.
            </p>
        </section>

        <section id="page2">
            <h1>Page 2</h1>
            <p>
                Integer porttitor vitae est vel suscipit. Fusce placerat justo at libero aliquam maximus.
            </p>
        </section>
        
        <section id="page1">
            <h1>Page 1</h1>
            <p>
                Ut aliquet sit amet urna non porta. Maecenas dignissim, sem eget pulvinar luctus, ex dolor posuere magna, ut elementum quam eros vel nulla.
            </p>
        </section>
    </main>
</body>
</html>

Navigating through pages without using Javascript

Answer №1

Similar questions

The execution of jQuery code from PHP using $.ajax is not functioning properly

Ways to prevent styles from being overridden by those specified in JavaScript

Enhance the functionality of a directive by incorporating the ui-mask directive

Stop images within contenteditable divs from being easily dragged and dropped into unrelated div elements

Using different CSS classes interchangeably in AngularJS

Embed HTML code to a website using a PHP script on a separate webpage

Custom styles for PrimeNG data tables

Is it true that by utilizing Vue's v-for, every line of HTML code becomes a

Tips for implementing a search filter in a select dropdown menu using Angular

Ways to eliminate the unusual dashed space in ReactJS using Bootstrap

What is the best way to eliminate the gap between header, content, and footer sections when in mobile view?

Using a CSS gradient with a variable in React.js - A guide to implementation

Ways to dynamically eliminate focus around text inputs

Issue with jQuery select box (roblaplaca) and its custom scroll bar functionality not functioning as expected

The scrolling feature in IE 7 with IE 7 standard does not respond to the jquery scroll event, whereas it functions properly in IE8 and IE

When previewing a card on Twitter's validator tool, the image displays properly. However, when attempting to share the image on

jQuery UI Sortable: Efficiently Drag Items Across Multiple Interconnected Lists

Generating forms dynamically with Vuetify

Issues arising with transferring information between components

Issues encountered when dealing with floating elements and margins