jQuery :target Selector

Posted in jQuery Tutorial

Updated on Apr 27, 2024

By Mari Selvan

👁️ 11 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

In web development, creating dynamic and interactive user experiences is essential. jQuery, a powerful JavaScript library, provides a range of selectors to simplify DOM manipulation and event handling. Among these selectors, the :target selector stands out for its ability to target elements based on their hash fragment identifier in the URL.

This guide explores the jQuery :target selector, its syntax, and practical examples to help you leverage its capabilities effectively.

🧠 Understanding :target Selector

The :target selector is used to select the target element associated with the current URL's hash fragment identifier (the portion of a URL that follows the # symbol). This selector is particularly useful for creating single-page applications (SPAs) and implementing navigation within a webpage without reloading the entire page.

💡 Syntax

The syntax for the :target selector is straightforward:

syntax.js

Copied

$(":target")

📝 Example

Styling the Target Element:

Suppose you have a navigation menu with links that scroll to different sections of a webpage using hash fragment identifiers. You can use the :target selector to style the targeted section when the link is clicked. For instance:
index.html
Copied
```
<nav>
  <ul>
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2</a></li>
  </ul>
</nav>
<section id="section1">Content of Section 1</section>
<section id="section2">Content of Section 2</section>
```
example.js
Copied
```
section:target {
  background-color: lightblue;
}
```
This CSS rule will change the background color of the targeted section when its corresponding link is clicked.

Implementing Smooth Scroll Behavior:

You can enhance the user experience by adding smooth scrolling to the targeted sections when a navigation link is clicked. jQuery can help achieve this effect:

index.html

Copied

<nav>
  <ul>
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2</a></li>
  </ul>
</nav>
<section id="section1">Content of Section 1</section>
<section id="section2">Content of Section 2</section>

example.js

Copied

$("a").on('click', function(event) {
  if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
          scrollTop: $(hash).offset().top
      }, 800, function(){
          window.location.hash = hash;
      });
  }
});

This script ensures a smooth scroll animation to the target section when a navigation link is clicked.

🎉 Conclusion

The jQuery :target selector provides a convenient way to manipulate elements based on the hash fragment identifier in the URL. Whether you want to style the targeted element, implement smooth scrolling, or create dynamic navigation within a single-page application, this selector offers versatile functionality.

By understanding its usage and incorporating it into your projects, you can enhance the user experience and create more engaging web applications.