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.

htmlcsspagination

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Eliminate styling that is specific to certain browsers

Recent browser updates have introduced new styling and functionality to input[type=number], including up and down buttons. In Chrome, I was able to eliminate this added styling by accessing the shadow DOM and identifying the specific element. However, de ...

htmlcssfirefoxbrowser

Troubleshooting Problems with Cascading Style Sheets

Struggling with a layout issue on my website. I need to display an image with text at the beginning of the site-wrap div under the name background-image, with the text inside that div. Adding line-height to the text div adjusts its height, but I want to m ...

htmlcss

The background color of the active tab is updated upon loading the page

I have attempted to modify this code to change the background color of li tag on click. It successfully changes the background color when hovering or clicking, but unfortunately reverts back to the default color upon page refresh. I am looking for a soluti ...

javascriptjqueryhtmlcss

Unleashing the Power of the "OR" Operator in Form Field Validation

The custom JavaScript function FormQuote_Validator is used to validate form fields. It should return the value "TRUE" and display an alert message if all three input fields are submitted without any numbers; otherwise, it should return the value "FALSE". ...

javascripthtmlforms

What is the best way to split a jQuery tab into four equally sized divs?

I am currently working with jquery tabs and within one of the tabs, I have 4 google charts each enclosed in a separate div. My goal is to position each div in a different quadrant of the tab area (north, south, east, and west of the screen). Currently, my ...

jqueryhtmlgoogle-visualizationjquery-tabs

Choose all the alternative A radio buttons utilizing JavaScript

If the "4 stars" option is selected at the top, I want all corresponding "4 stars" options in the form to be automatically selected. Similarly, if "3 stars" is chosen, I need all the "3 stars" options to be selected. I attempted to achieve this functionali ...

javascriptjqueryhtmlradio-buttonradio-group

Adjust the position of a child element to be just outside the boundaries of its parent element using CSS

I am facing an issue with 2 nested divs in my HTML code. The design requires the inner div to appear "on top of" the outer div, like this: (source: examplewebsite.com) Although I have applied CSS to both elements, including a negative top margin on t ...

htmlcsspositioning

Unique option preservation on customized HTML select menus - Maintain original selection

Currently, I am attempting to replicate a custom HTML select based on the example provided by W3 Schools. You can view the demo through this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select The issue I am encountering is that ...

javascripthtmlselect

"Enjoying a table header that scrolls freely with autoscroll feature

Resolved - http://jsfiddle.net/CrSpu/11704/ I'm facing an issue with a table that has autoscroll functionality. I am looking to freeze the header of the table when automatic scrolling occurs, or you can test it out using my code pen. I'm uncer ...

javascriptjquerycsshtml-tableautoscroll

How can I obtain live subprocess output updates?

I am attempting to execute the "tail - f" command on the server to receive real-time output displayed on this HTML page. However, I have not been successful in achieving this and only simple output commands are being displayed instantly. How can I utilize ...

pythonhtmllinuxflask

Trying to understand the strange behavior of HTML parsing with jQuery in Javascript and Firefox

I have been working on a script to parse an HTML page using jQuery. The script runs smoothly in Chrome, IE, and Safari, but I'm facing some unexpected behavior while testing it in Firefox (version 36.0.1). Here's the code snippet: $.ajax({ u ...

javascriptjqueryhtmlfirefox

Steps for retrieving the attribute values of <i> tags enclosed within a designated <div> element

Currently, I am extracting data from a website where I encounter a recurring pattern with a varying number of values. For example, an instance of this pattern is shown below: <div class="lang"> <i class="flag fr" qtip-tooltip= ...

pythonhtmlseleniumweb-scrapingxpath

The redirection from HTTP or www to HTTPS is not functioning as expected

Redirecting all links to my website to the https:// domain is supposed to work flawlessly, but there are certain ways it doesn't quite function as expected. https://www.example.com --- works example.com --- works www.example.com --- encounters issu ...

javascriptjqueryhtml.htaccess

$_POST is unable to read POST parameters when using AJAX

I've been facing an issue with sending data to my PHP script. Interestingly, everything works smoothly when using POSTMAN and the results are displayed correctly. However, when attempting to send the data through AJAX in my HTML project, the PHP scrip ...

phphtmlajax

django displaying a blank screen

I'm having trouble with the code, forms.py from django.form import datetime, widgets import datetime import calendar from bootstrap_datepicker.widgets import Datepicker class DateForm(forms.Form): date_1=forms.DateTimeField(widget=DatePicker( ...

pythonhtmldjango

Discovering the mean value from a data set in a spreadsheet

I have been tasked with creating an HTML page for a car dealership using JQuery and Bootstrap 5. The goal is to utilize Bootstrap 5 to accomplish the following: Set up a table with appropriate form input elements that allow users to input four (4) quarter ...

javascripthtmljqueryaveragebootstrap-5

Angular2: using the #ngFor directive to assign a value to a component field

Here's a component I'm working with: @Component({ selector: "expenses-component", templateUrl: "expenses.html" }) export default class ExpensesComponent { private expenses: [] = [{name: "Foo", amount: 100}, {name ...

htmlangulartypescript

Utilizing Ajax to fetch a div element from a web page

Hey there! I have a link set up that loads a page into a specific div ID, which is #ey_4col3. The issue I'm facing is that it loads the entire page along with all its contents, but what I really want to load from that page is just the content within ...

javascriptjqueryhtmlcssajax

I am looking to modify the anchor link and image source using JQuery based on the specific div ID

Looking to update the link of an anchor and source of an image inside this div when clicking on the FR button. I need help figuring out how to do this with JQuery. Here's the code: <div id="my_id"> <a href="wwww.google.com&qu ...

htmljquery

Ways to design siblings that are not currently being hovered over

Is there a way to achieve an effect where hovering over one list item causes all other list items to fade out? I'm searching for a method to style an element that is not being hovered, when one of its siblings is in the hovered state. I've trie ...

htmlcss