Using
$("a").attr("href", "http://www.google.com/")
will modify the href of all hyperlinks to point to Google. You probably want a somewhat more refined selector though. For instance, if you have a mix of link source (hyperlink) and link target (a.k.a. "anchor") anchor tags:
<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>
...Then you probably don't want to accidentally add href
attributes to them. For safety then, we can specify that our selector will only match <a>
tags with an existing href
attribute:
$("a[href]") //...
Of course, you'll probably have something more interesting in mind. If you want to match an anchor with a specific existing href
, you might use something like this:
$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')
This will find links where the href
exactly matches the string http://www.google.com/
. A more involved task might be matching, then updating only part of the href
:
$("a[href^='http://stackoverflow.com']")
.each(function()
{
this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/,
"http://stackoverflow.com");
});
The first part selects only links where the href starts with http://stackoverflow.com
. Then, a function is defined that uses a simple regular expression to replace this part of the URL with a new one. Note the flexibility this gives you - any sort of modification to the link could be done here.
HTML
The plain HTML way is to put it in a <form>
wherein you specify the desired target URL in the action
attribute.
<form action="https://google.com">
<input type="submit" value="Go to Google" />
</form>
If necessary, set CSS display: inline;
on the form to keep it in the flow with the surrounding text. Instead of <input type="submit">
in above example, you can also use <button type="submit">
. The only difference is that the <button>
element allows children.
You'd intuitively expect to be able to use <button href="https://google.com">
analogous with the <a>
element, but unfortunately no, this attribute does not exist according to HTML specification.
CSS
If CSS is allowed, simply use an <a>
which you style to look like a button using among others the appearance
property (it's only not supported in Internet Explorer).
<a href="https://google.com" class="button">Go to Google</a>
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
Or pick one of those many CSS libraries like Bootstrap.
<a href="https://google.com" class="btn btn-primary">Go to Google</a>
JavaScript
If JavaScript is allowed, set the window.location.href
.
<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />
Instead of <input type="button">
in above example, you can also use <button>
. The only difference is that the <button>
element allows children.
Best Answer
should be the correct markdown syntax to jump to the anchor point named pookie.
To insert an anchor point of that name use HTML:
Markdown doesn't seem to mind where you put the anchor point. A useful place to put it is in a header. For example:
works very well. (I'd demonstrate here but SO's renderer strips out the anchor.)
Note on self-closing tags and
id=
versusname=
An earlier version of this post suggested using
<a id='tith' />
, using the self-closing syntax for XHTML, and using theid
attribute instead ofname
.XHTML allows for any tag to be 'empty' and 'self-closed'. That is,
<tag />
is short-hand for<tag></tag>
, a matched pair of tags with an empty body. Most browsers will accept XHTML, but some do not. To avoid cross-browser problems, close the tag explicitly using<tag></tag>
, as recommended above.Finally, the attribute
name=
was deprecated in XHTML, so I originally usedid=
, which everyone recognises. However, HTML5 now creates a global variable in JavaScript when usingid=
, and this may not necessarily be what you want. So, usingname=
is now likely to be more friendly.(Thanks to Slipp Douglas for explaining XHTML to me, and nailer for pointing out the HTML5 side-effect — see the comments and nailer's answer for more detail.
name=
appears to work everywhere, though it is deprecated in XHTML.)