JavaScript & jQuery: The Missing Manual, 2nd Edition

Chapter 8. Improving Navigation

Links make the web go around. Without the instant access to information provided by linking from page to page and site to site, the web wouldn’t have gotten very far. In fact, it wouldn’t be a web at all. Since links are one of the most common and powerful pieces of HTML, it’s only natural that there are lots of JavaScript techniques for enhancing how links work. In this chapter, you’ll learn the basics of using JavaScript to control links, and how to open links in new windows and in windows within a page.

Some Link Basics

You undoubtedly know a lot about links already. After all, they’re the heart of the web, and the humble <a> tag is one of the first pieces of HTML a web designer learns. Adding JavaScript to a page can turn a basic link into a supercharged gateway of interactivity…but only if you know how to use JavaScript to control your links. Once you’ve got the basics, later sections of this chapter will give you real-world techniques for controlling links with JavaScript.

Selecting Links with JavaScript

To do anything with a link on a web page, you must first select it. You can select all of the links on a page, just one, or a particular group of related links—for example, links that are grouped together in the same part of a page, or that share a certain characteristic such as external links that point to other websites.

jQuery gives you great flexibility in selecting document elements. For example, the code $(‘a’) creates a jQuery selection of ...