CODEWITHSUNDEEP
jqueryhtmlhyperlink
Sergeen
Sergeen

Reputation: 97

There is a shorter way to solve multiple links with jQuery?

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:

$('#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!

Upvotes: 0

Views: 101

Answers (7)

Godinall
Godinall

Reputation: 2290

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;

Like THIS DEMO

Or, if you prefer what you have now, using below:

    $('.link').on('click', function () {
        window.open($(this).data('link'), '_blank');
    })
;

DEMO HERE

Personally option one is a better solution.

Upvotes: 1

Flater
Flater

Reputation: 13763

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 */
  }

Upvotes: 1

Blazemonger
Blazemonger

Reputation: 92893

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>

http://jsfiddle.net/mblase75/j5UP5/

Upvotes: 0

Anri
Anri

Reputation: 1693

create function for this

function goNewLink(id,url){
    $("#"+id).on('click', function () {
        window.open(url, '_blank');
    });
}

use goNewLink("id","www.example.com");

Upvotes: 0

Jay Blanchard
Jay Blanchard

Reputation: 34406

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.

Upvotes: 0

faby
faby

Reputation: 7558

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

Upvotes: 0

Pankaj
Pankaj

Reputation: 99

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>

Upvotes: 2

Related Questions