Home > Article > Web Front-end > How to implement focus switching using jQuery
How to implement focus switching using jQuery
- WBOYOriginal
- 2024-02-23 19:48:24564browse
Title: Tips for using jQuery to achieve focus switching
With the continuous development and complexity of Web pages, focus switching has become a focus for designers and developers. One of the issues of concern. As a powerful JavaScript library, jQuery provides many convenient methods to achieve the focus switching effect. This article will introduce some common techniques for using jQuery to achieve focus switching, and attach specific code examples for your reference.
1. Basic focus switching
First, let’s take a look at how to achieve the basic focus switching effect through jQuery. The following code example demonstrates how to switch focus between different elements when a button is clicked:
<!DOCTYPE html>
<html>
<head>
<title>焦点切换示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.active {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<button id="btn1">元素1</button>
<button id="btn2">元素2</button>
<button id="btn3">元素3</button>
</div>
<script>
$(document).ready(function() {
$('#btn1').click(function() {
$(this).toggleClass('active');
$('#btn2, #btn3').removeClass('active');
});
$('#btn2').click(function() {
$(this).toggleClass('active');
$('#btn1, #btn3').removeClass('active');
});
$('#btn3').click(function() {
$(this).toggleClass('active');
$('#btn1, #btn2').removeClass('active');
});
});
</script>
</body>
</html>In the above example, when different buttons are clicked, the corresponding buttons will be added or removedactive class, thereby changing the style of the button and achieving the focus switching effect.
2. Use event delegation to achieve focus switching
Using event delegation can simplify the code and reduce the writing of repetitive code. The following example shows how to implement focus switching through event delegation:
<!DOCTYPE html>
<html>
<head>
<title>焦点切换示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.active {
background-color: yellow;
}
</style>
</head>
<body>
<div id="btn-container">
<button>元素1</button>
<button>元素2</button>
<button>元素3</button>
</div>
<script>
$(document).ready(function() {
$('#btn-container').on('click', 'button', function() {
$(this).toggleClass('active').siblings().removeClass('active');
});
});
</script>
</body>
</html> In this example, we use event delegation to listen to button click events and use siblings() Method to remove the active class of other sibling elements to achieve the focus switching effect.
Conclusion
Through the introduction of this article, we have learned how to use jQuery to achieve focus switching techniques, including basic focus switching and the use of event delegation. In actual projects, appropriate methods can be selected according to specific needs and scenarios to achieve focus switching and improve user experience and page interaction effects. Hope this article helps you!
The above is the detailed content of How to implement focus switching using jQuery. For more information, please follow other related articles on the PHP Chinese website!