
jQuery Topics
- jQuery Introduction
- jQuery Callbacks
- jQuery deferred
- jQuery selectors
- *
- :animated
- [name|=”value”]
- [name*=”value”]
- [name~=”value”]
- [name$=”value”]
- [name=”value”]
- [name!=”value”]
- [name^=”value”]
- :button
- :checkbox
- :checked
- Child Selector
- .class
- :contains()
- Descendant Selector
- :disabled
- Element
- :empty
- :enabled
- :eq()
- :even
- :file
- :first-child
- :first-of-type
- :first
- :focus
- :gt()
- Has Attribute
- :has()
- :header
- :hidden
- #id
- :image
- :input
- :lang()
- :last-child
- :last-of-type
- :last
- :lt()
- [name=”value”][name2=”value2″]
- (“selector1, selector2, selectorN”)
- (“prev + next”)
- (“prev ~ siblings”)
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :odd
- :only-child
- :only-of-type
- :parent
- :password
- :radio
- :reset
- :root
- :selected
- :submit
- :target
- :text
- :visible
- jQuery Ajax Events
- jQuery Ajax Methods
- jQuery Keyboard Events
- jQuery Keyboard Methods
- jQuery Form Events
- jQuery Form Methods
- jQuery Mouse Events
- jQuery Mouse Methods
- jQuery Event Properties
- jQuery Event Methods
- jQuery HTML
- jQuery CSS
- jQuery Fading
- jQuery Traversing
- jQuery Utilities
- jQuery Properties
jQuery :target Selector

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:
$(":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.htmlCopied<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.jsCopiedsection: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.htmlCopied<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.jsCopied$("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.
Join our Community:
Author

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (jQuery :target Selector), please comment here. I will help you immediately.