Pergunta
I am new to jQuery and programing in general. I finished my first web site and decided to use jQuery to solve most of the code, not because it was better but because I needed to practice.
Now, the site has a list of links and I use a code like the one below repeated 12 times:
https://stackoverflow.com/questions/23656356
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian$('#id_of_the_div').on('click', function () {
window.open("http://example.com/", '_blank');
});
Now it sounds to me that maybe there is a better way than this, because I only have 12 links in my website but, what if I have 30 or 50 links? Take in account that the site is only HTML and jQuery, no PHP or server side code for now.
A working example: http://jsfiddle.net/sergeen/RB3aZ/
Thanks!
Solução 2
I guess you are using divs because it's easier to style them, but you can still do the same when using <a> tag with display:block;
Or, if you prefer what you have now, using below:
$('.link').on('click', function () {
window.open($(this).data('link'), '_blank');
})
;
Personally option one is a better solution.
Outras dicas
You got the concept of divisions wrong. If you want to add links use the Anchor Tag.
<html>
<a href="http://example.com/">Example</a>
</html>
I suggest you use the HTML element that was created for this task, our good old friend <a> ;)
<a href="http://myurl.com">My text</a>
By default, it looks like a blue link, which I think is what you are trying to avoid. But it's much easier to change the style of the link, rather than try using other elements that usually do not redirect to other pages.
Add this to a CSS file, or to a <style> tag on your page:
a {
text-decoration: none; /* no underline */
color: black; /* changes the color of the text*/
background-color: red; /* changes the background color*/
padding: 10px; /*this makes sure you have some open space so your item looks like a button */
}
Note that this CSS snippet changes the style of ALL <a> elements on the page. It looks like a button, but if you click it, it still works like a link.
Update
If you also want to remove the underline when you hover over the link, also add the following to the CSS:
a:hover { /* :hover is the state of the item when the mouse is over it, but you're not clicking (yet) */
text-decoration: none; /* no underline */
}
instead of using something like this
$('#js').on('click', function () {
window.open("http://jsfiddle.net/", '_blank');
});
you can remove js part and replace in html
<a class="link" href="http://jsfiddle.net/" target="_blank" id="js">JSFIDDLE</a>
and then change css to style anchor elements of class link
You could use a switch statement with your current markup -
$('.link').on('click', function () {
switch (this.id) {
case 'js':
window.open("http://jsfiddle.net/", '_blank');
break;
case 'careers':
window.open("http://careers.stackoverflow.com/", '_blank');
break;
}
});
Or you could change your markup to help you be more efficient by adding the URL information -
<div class="link" id="js" data-url="http://jsfiddle.net">JSFIDDLE</div>
<div class="link" id="careers" data-url="http://careers.stackoverflow.com">CAREERS @ STACKOVERFLOW</div>
And then your code block gets much shorter -
$('.link').on('click', function () {
var thisURL = $(this).data('url');
window.open(thisURL, '_blank');
});
But you should switch to anchor tags for your links. You can still use the kind of coding that I have provided here.
create function for this
function goNewLink(id,url){
$("#"+id).on('click', function () {
window.open(url, '_blank');
});
}
use goNewLink("id","www.example.com");
If you just want to use div tags because of their shape, there's an easier way to do that. Use anchor tags and apply display: block (anchor tags are normally display: inline by default, where styles like width don't apply):
.link {
display: block; /* make them "rectangular" elements */
text-decoration: none; /* remove underlines -- optional */
/* the rest is the same */
}
HTML:
<div class="container">
<a class="link" id="js" href="http://jsfiddle.net/" target="_blank">JSFIDDLE</a>
<a class="link" id="careers" href="http://careers.stackoverflow.com/" target="_blank">CAREERS @ STACKOVERFLOW</a>
<a class="link" id="meta" href="http://meta.stackoverflow.com/" target="_blank">META @ STACKOVERFLOW</a>
<a class="link" id="stack" href="http://stackoverflow.com/" target="_blank">STACKOVERFLOW @ STACKOVERFLOW</a>
<a class="link" id="alist" href="http://alistapart.com/" target="_blank">A LIST APART</a>
</div>
