Highlight a specific DIV

Question

I'm trying to 'hightlight' a specific div.

Here is my html code

<!DOCTYPE html>
<html>
    <head>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <style type="text/css">div { margin: 0px; width: 300px; height: 80px; background: #FFF; border: 1px solid black; position: relative; }</style>
        <script>
            $(document).ready(function() {
                $("a").click(function () {
                    $("div").effect("highlight", {color:"#FF0000"}, 3000);
                });
            });
        </script>
    </head>
    <body>
        <a href="#id_1"><b>id_1</b></a>
        <br/>
        <a href="#id_2"><b>id_2</b></a>

        <br/><br/><br/><br/>
        <div id="id_1"><h2>id_1 - <a class="altlink" href="#top" name="id_1" id="id_1">Top</a></h2></div>
        <div id="id_2"><h2>id_2 - <a class="altlink" href="#top" name="id_2" id="id_2">Top</a></h2></div>
    </body>
</html>

When I click on the a element with the href #id_1, how can I make it highlight the <div id="id_1"> element?

Thanks !

By the way, you shouldn't have the same id used on several elements of the DOM — Boris Delormas, Nov 29 '11 at 14:32

Naftali · Accepted Answer · 2011-11-29T14:49:39.180

1

Try this:

$('a[href^="#id"]').on('click', function() {
    var sHref = this.href.split('/');
    $(sHref[sHref.length - 1]).effect("highlight", {
        color: "#FF0000"
    }, 3000);
});

Fiddle: http://jsfiddle.net/maniator/4PgC6/

Side note: If using jQuery < 1.7 then do:

$('a[href^="#id"]').click(function() {
    var sHref = this.href.split('/');
    $(sHref[sHref.length - 1]).effect("highlight", {
        color: "#FF0000"
    }, 3000);
});

Fiddle: http://jsfiddle.net/maniator/4PgC6/9/

edited Nov 29 '11 at 14:49

answered Nov 29 '11 at 14:24

Naftali

144,921
39
244
303

1

@mblase75 What are you talking about? Neither the question nor this answer uses jQuery UI anywhere. – Bojangles Nov 29 '11 at 14:29
@JamWaffles Isn't that where the '.effect' method comes from? – Blazemonger Nov 29 '11 at 14:30
2

only use this if you know you will be using jQuery 1.7+ otherwise use `$('a[href=^"#id"]').click(function(){....` – Lee Price Nov 29 '11 at 14:31
@mblase75 I do apologise; I didn't see that. I even used `.effect()` in my own answer! – Bojangles Nov 29 '11 at 14:31
@JamWaffles it does. it uses the `effect`. I changed my answer to reflect it. – Naftali Nov 29 '11 at 14:32
@JohnStrave **no problem ^_^**, don't forget to accept an answer when you can :-) – Naftali Nov 29 '11 at 14:40
@JohnStrave Try `alert(this.href);` to see what it looks like. and the same with `alert(sHref);` – Naftali Nov 29 '11 at 15:11

i am ArbZ · Answer 2 · 2014-04-28T11:19:03.530

0

$(document).ready(function() { $("a#id_1").click(function () {
$("div#id_1").effect("highlight", {color:"#FF0000"}, 3000); return false; }); $("a#id_2").click(function () {
$("div#id_2").effect("highlight", {color:"#0000FF"}, 3000); return false; }); });

and the HTML would have an "A" tag which is [code]

a href="#" id="id1"

a href="#" id="id2"

edited Apr 28 '14 at 11:19

answered Apr 28 '14 at 11:14

i am ArbZ

69
3

score 0 · Answer 3 · answered Nov 29 '11 at 14:25

Try this:

$('a').click(function() {
    var selector = $(this).attr('href');

    // Highlight div with whatever CSS you like
    $(selector).effect("highlight", {color:"#FF0000"}, 3000);
}

This uses the href attribute of the link as the selector for the .effect() line.

LostMohican · Answer 4 · 2011-11-29T14:38:19.927

0

you need to use here like this :

$(document).ready(function() {
    $("a").click(function () {
                    $(this).parent().parent().effect("highlight", {color:"#FF0000"}, 3000);
                });
            });

EDIT : fixed the mistake, put the second .parent() call

edited Nov 29 '11 at 14:38

answered Nov 29 '11 at 14:25

LostMohican

3,082
7
29
38

Why would you highlight the parent? – Naftali Nov 29 '11 at 14:27
@Neal because parent is the div to be highlighted – LostMohican Nov 29 '11 at 14:30

Highlight a specific DIV

4 Answers4