Yogesh Chauhan's Blog

How to create a simple tab interaction using CSS?

in CSS on February 7, 2021

We want to create a simple tab view like this one:

Generally we add a link to point to a page but we can also add ‘#id‘ to point it to a specific element.

When we click on the link, browsers will try to focus on the element. At that time, we can adjust the style of the elements to create tab view.

To do that we are going to use the CSS ‘:target‘ selector.

CSS :target Selector

The element we link into a tags using ‘#id‘ to is the target element. So, we can use it to style the current active target element.

We’ll use CSS display property on that targeted element to create the tab interface.

Example


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
Introduction to components and templates Part 4: Pipes and DirectivesAngularWhat’s a Strict mode in JavaScript?JavaScriptHow to add Laravel to WordPress using Sage theme (and install Tailwind CSS)?PHPHow to get Current Year, Month and Date in JavaScript?JavaScriptUnary Operators in JavaScriptJavaScriptHow to add and remove list items using JavaScript?JavaScriptThe Complete Basic Explanation of PHP SessionsPHPSolution to “NullInjectorError: No provider for module” in Angular 9AngularHow to disable right click and drag and drop of images using jQuery?jQueryHow to activate and deactivate hooks in a WordPress plugin?WordPressHow to add Read More Read Less Button using JavaScript?JavaScriptHow to change the Login Logo in WordPress?WordPress