Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript jQuery Basics (2014) Creating a Simple Lightbox Adding New Attribute Values with attr()

Michael Stolp-Smith
Michael Stolp-Smith
4,855 Points

What am I even supposed to do here? Do I need to create an attribute? There seems to be way to much inference.

The challenge: Using jQuery only, add to all links with the class "external", the target attribute with the value of "_blank".

doesn't make sense to me in how it is worded. I don't think I understand. I do get how to use attr on a basic level. Do I need to be creating a "target" attribute?? I really do not know what this is asking me to do.

js/app.js

index.html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
  <title>Links Page</title>
</head>
<body>
  <h1>Links</h1>
  <ul>
    <li><a href="http://google.com" class="external">Google</a></li>
    <li><a href="http://yahoo.com" class="external">Yahoo</a></li>
  </ul>
  <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

3 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

The target attribute it built into HTML. It's nothing you "create" so to speak. A target of "_blank" will open a link in a new window. That's all it wants. Take a look at this line of code and see what I mean:

$(".external").attr("target","_blank");

Here we target the class "external". Then we add the code that sets the target attribute to open those links in a new window/tab.

Michael Stolp-Smith
Michael Stolp-Smith
4,855 Points

Let me see if I understand this. "target" is an inbuilt functionality in HTML used to direct the behavior of a clicked link. (I had to look this up, somehow, missed when I did a basic html/css course via code academy.)

so this code says add the html attribute "target", with the string value of "_blank" to the html in the DOM via the .attr() method? (this might seem redundant, but my understanding of this is fairly shaky at the moment.)

I am assuming this would result in : | a href="http://yahoo.com" class="external" target="_blank" | within the link html?

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

You've got it! That's exactly what it does. Then when the user clicks on that it'll open up in a new window/tab.