Click on an element highlights other element

Question

Is there any way to change the attributes of an element when clicking on another element? For example, consider this approach where I have a link like so:

<a href="#100">Click me!</a>

And then close to it I have this:

<span id="100" class="clickTarget">Important text</span>

And then on my css file I have this:

.clickTarget:target {
    color: #4f8dd5;
}

That means whenever the link is clicked, Important text changes its color. The problem with this approach is that the page is also scrolled even if only a bit. Is there any other way to do this that doesn't scroll the page?

You can use jQuery if you see fit.

I know it doesnt answer the question, but you can include the whole jQuery in the same html file. — Zim84, Mar 29 '13 at 11:31
you can download jQuery source, store in your local storage and include in your web page. — Arie Xiao, Mar 29 '13 at 11:32
Really? Alright, that simplifies things... jQuery is now allowed then. — Alex, Mar 29 '13 at 11:33
`Click me!` solves the scrolling issue, why would you need jQuery for this ? — adeneo, Mar 29 '13 at 11:36
@adeneo - return false will also prevent color changes of target element — Viktor S., Mar 29 '13 at 11:38

David Fregoli · Accepted Answer · 2013-03-29T11:52:10.453

3

This will work with multiple links:

change your css to:

.clickTarget.target {
    color: #4f8dd5;
}

give your links a common class ie link

$('a.link').on('click', function() {
   $('.target').removeClass('target');
   var id = $(this).attr('href');
   $(id).addClass('target');
   return false;
});

http://jsfiddle.net/8S5mD/2/

edited Mar 29 '13 at 11:52

answered Mar 29 '13 at 11:44

David Fregoli

3,377
1
19
40

Your answer seems to me the simplest and cleanest, but I can't get it to work. I added these two lines to the head of my page: `` and the links.js file has the code you wrote. Do I need to do something else? I'm very new to jquery. – Alex Mar 29 '13 at 12:12
Add code like this in link.js $(document).ready(function(){ that above code}); – karthick Mar 29 '13 at 12:15
The `script` linking `links.js` has to be included after the jQuery one. my code in links.js should be wrapper around `$(document).ready(function() { //mycode });` alternatively you can put the `script` tags at the bottom of the html page instead of the head. http://api.jquery.com/ready/ – David Fregoli Mar 29 '13 at 12:16

score 0 · Answer 2 · answered Mar 29 '13 at 11:44

Add an attribute data-id (or other names) to your a link to specify the id of the associated span.

<a href="#100" data-id="100">Click me!</a>

And here is javascript:

window.onload = function () {
    var alinks = document.getElementsByTagName('a');
    for (var i = 0; i < alinks.length; i++) {
        alinks[i].addEventListener('click', function () {
            var id = this.getAttribute('data-id');
            var span = document.getElementById(id);
            span.style.color = '#4f8dd5';
        });
    }
}

See example at jsFiddle

Viktor S. · Answer 3 · 2013-03-29T11:59:08.683

0

Suppose something like this should work for you:

CSS:

   .target{
       color:#4f8dd5;
    }

HTML:

<a href="#" data-target="#100">click me<a>

JS:

$(document).on("click", "a", function(e) {
   if($(this).data("target")) {
     e.preventDefault(); //just to avoid # appearing in address after click.
     $(".target").removeClass("target");
     $($(this).data("target")).addClass("target");
   }
})

This way ANY (even if it was added after code above is executed) link will run a function and if it has a data-target attribute, it will be used as a jquery selector to find an element which should be highlighted.

UPD:

Changed to reflect behavior of target (only one element should be highlighted at once) pointed by David Fregoli

edited Mar 29 '13 at 11:59

answered Mar 29 '13 at 11:45

Viktor S.

12,736
1
27
52

this will leave any previously selected element highlighted though – David Fregoli Mar 29 '13 at 11:50
Oops. Reasonable. I missed that behavior of `:target` – Viktor S. Mar 29 '13 at 11:56

score 0 · Answer 4 · answered Mar 29 '13 at 12:01

Try this one

    $("a").bind('click',function(e){
          if(!$("span.clickTarget").hasClass('changeTextColor')){
             $("span.clickTarget").addClass('changeTextColor');
           }
     });

css:

    .changeTextColor {
         color: #4f8dd5;
    }

Click on an element highlights other element

4 Answers4

Linked