If you are a developer, you might often find yourself in situations where you need to create dynamic and interactive web pages. One common requirement is to change the content of a div when a navbar item is clicked. While JavaScript is the go-to solution for such tasks, there are scenarios where you might want to achieve this without using JavaScript. This article will guide you through the process of navbar click to change div content without JavaScript using only HTML and CSS. This method is simple, easy to understand, and perfect for beginners.
Why Avoid JavaScript?
JavaScript is a powerful tool for web development, but there are reasons you might want to avoid it in certain situations:
- Performance: JavaScript can slow down your website if not used efficiently.
- Accessibility: Some users disable JavaScript in their browsers for security or performance reasons.
- Simplicity: For small projects, using only HTML and CSS can keep your codebase simpler and easier to maintain.
The Concept
The idea is to use the :target pseudo-class in CSS to change the content of a div when a navbar item is clicked. Here the “:target” pseudo-class is used to style the target element of a URL containing a fragment identifier (the part of the URL after the #).
Step-by-Step Guide
1. HTML Structure
First, let’s create the basic HTML structure. We need a navbar with links and several divs with different content. Each link in the navbar will point to a different div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar Click to Change Div Content</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<ul>
<li><a href="#content1">Content 1</a></li>
<li><a href="#content2">Content 2</a></li>
<li><a href="#content3">Content 3</a></li>
</ul>
</nav>
<div id="content">
<div id="content1" class="content">This is the first content.</div>
<div id="content2" class="content">This is the second content.</div>
<div id="content3" class="content">This is the third content.</div>
</div>
</body>
</html>
In this structure, we have a navbar with three links. Each link points to a different div with unique content.
2. CSS Styling
Next, we need to style the content divs and use the :target pseudo-class to display the correct content when a navbar item is clicked.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
nav {
margin-bottom: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
}
nav ul li {
margin-right: 20px;
}
nav ul li a {
text-decoration: none;
color: #007bff;
font-weight: bold;
padding: 8px 12px;
border-radius: 4px;
transition: background-color 0.3s ease;
}
nav ul li a:hover {
background-color: #007bff;
color: #fff;
}
.content {
display: none;
}
In this CSS, we hide all content divs by default using display: none;. When a div is targeted (i.e., when its corresponding link is clicked), we display it using display: block;.
3. Enhancing User Experience
To make the user experience smoother, we can add some transitions and default content.
.content {
display: none;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.content:target {
display: block;
opacity: 1;
}
#content1 {
display: block;
opacity: 1;
}
.content-section {
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}With these styles, the content will fade in and out smoothly. We also set the first content div to be displayed by default.
Putting It All Together
Here is the complete code:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar Click to Change Div Content</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<ul>
<li><a href="#content1">Content 1</a></li>
<li><a href="#content2">Content 2</a></li>
<li><a href="#content3">Content 3</a></li>
</ul>
</nav>
<div id="content">
<div id="content1" class="content">This is the first content.</div>
<div id="content2" class="content">This is the second content.</div>
<div id="content3" class="content">This is the third content.</div>
</div>
</body>
</html>
CSS:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
nav {
margin-bottom: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
}
nav ul li {
margin-right: 20px;
}
nav ul li a {
text-decoration: none;
color: #007bff;
font-weight: bold;
padding: 8px 12px;
border-radius: 4px;
transition: background-color 0.3s ease;
}
nav ul li a:hover {
background-color: #007bff;
color: #fff;
}
.content {
display: none;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.content:target {
display: block;
opacity: 1;
}
#content1 {
display: block;
opacity: 1;
}
.content-section {
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}Result:
Explanation of How the Code Works!
HTML Code
The HTML code sets up a basic webpage structure with a navigation bar and three content sections. Here’s a breakdown:
1. DOCTYPE and HTML Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar Click to Change Div Content</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>2. Navigation Bar:
<nav>
<ul>
<li><a href="#content1">Content 1</a></li>
<li><a href="#content2">Content 2</a></li>
<li><a href="#content3">Content 3</a></li>
</ul>
</nav>3. Content Sections:
<div id="content">
<div id="content1" class="content">This is the first content.</div>
<div id="content2" class="content">This is the second content.</div>
<div id="content3" class="content">This is the third content.</div>
</div>
</body>
</html>CSS Code
The CSS code styles the navigation bar and content sections, and controls the visibility of the content sections based on which link is clicked. Here’s a breakdown:
1. Basic Styles:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
nav {
margin-bottom: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
}
nav ul li {
margin-right: 20px;
}
nav ul li a {
text-decoration: none;
color: #007bff;
font-weight: bold;
padding: 8px 12px;
border-radius: 4px;
transition: background-color 0.3s ease;
}
nav ul li a:hover {
background-color: #007bff;
color: #fff;
}2. Content Visibility:
.content {
display: none;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.content:target {
display: block;
opacity: 1;
}
#content1 {
display: block;
opacity: 1;
}
.content-section {
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}How It Works
- Navigation Links: The navigation bar contains links that point to different content sections using
href="#content1",href="#content2", andhref="#content3". - Content Sections: Each content section has an
idthat matches thehrefattribute of the navigation links. - CSS Target Selector: The CSS
:targetpseudo-class is used to style the currently active content section. When a link is clicked, the corresponding content section becomes the target, and itsdisplayproperty is set toblockandopacityto1, making it visible. - Initial Visibility: The
#content1section is initially visible because it hasdisplay: block;andopacity: 1;set in the CSS.
When you click on a navigation link, the browser scrolls to the corresponding content section, and the CSS :target selector makes that section visible while hiding the others. Also read, Understanding CSS Alternatre Column: A Simple Guide
Conclusion
By using the :target pseudo-class in CSS, you can create a simple and effective way to change div content by clicking on a navbar without relying on JavaScript. This method is not only easy to implement but also ensures that your website remains accessible and performs well. Whether you’re a beginner or an experienced developer, this technique can be a valuable addition to your toolkit. Also you can follow this article, Change Content Nav on Click Using CSS.
