How to get a classic hover, active,etc. behavior with javascript

Question

I have this simple problem that I keep running into. Now I always use the same solution but I guess it is not the right way of doing it.

Here is the case:

If have a page with 6 links and 6 tabs. Each link shows or hide a tab with javascript (display:block/none). I run into the problem that the normal html/css way doesn't work. I can set my css to make a link hover, but things like active, etc. don't work. Now i use 6 separate functions to manipulate the style of each link so that when people click link 5, link 5 is underlined and the rest not.

I already tried to refactor my code by using .this and obj. but this still doesn't give the behavior I want. It seems that the css doesn't work anymore once you change the css with js.

I can't imagine that this is the correct way to achieve the normal html link behavior?

Does anybody have ideas? How do you fix this problem? This becomes a real problem for my newer projects where all the content is automatically generated.

Could you show us a bit of the html/css/js code?

Humberto
– Humberto

2012-02-08 16:38:16 +00:00
Commented Feb 8, 2012 at 16:38 — Humberto
– Humberto, Commented Feb 8, 2012 at 16:38

Quentin · Accepted Answer · 2012-02-08 17:02:52Z

2

It seems that the css doesn't work anymore once u change the css with js.

This suggests that (directly of via some abstraction) you are using JS to change the .style.* properties of the element.

These map on to the style attribute, which is always considered to be "most specific".

The solution is to leave the style attribute alone. If you want to change the style of an element then have your CSS prewritten in the stylesheet. Then use JavaScript to modify the className of the element.

This gives you better control over what styles are being applied.

(This just follows on from the usual rules about separation of concerns. Developers are generally getting better at keeping the CSS separate from the HTML and the JS separate from the HTML, but slip up most often in failing to keep the CSS separate from the JS)

edited Feb 8, 2012 at 17:02

answered Feb 8, 2012 at 16:46

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Karl · Accepted Answer · 2012-02-08 16:51:29Z

0

If you use jQuery, you can use the hover function to easily create a hover state effect.

if ($("#tab").hasClass('active') {
    $(".class-of-item-to-show").show();
}

$("#tab1").hover(
  function () {
    $(".class-of-item-to-show").show();
  }, 
  function () {
    $(".class-of-item-to-show").hide();
  }
);

If you post your tabs and data to display in the question I can help you set it up as a loop..

edited Feb 8, 2012 at 16:51

answered Feb 8, 2012 at 16:41

Karl

5951 gold badge11 silver badges31 bronze badges

1 Comment

Karl Over a year ago

Could you post your HTML so I can write up a jQuery solution for you?

Jayanga · Accepted Answer · 2012-02-08 17:22:43Z

I think you can achieve the functionality you want with jQuery.

I will just put a sample code so that you can have an idea. For the following set of links.

<a href ="#" class ="test not" >a</a>
<a href ="#" class ="test not" >b</a>
<a href ="#" class ="test not" >c</a>

then using jQuery live you can write code for any event for example I will show how to remove and add classes in hover event

<script type ="text/javascript">
    $(document).ready(function () {
        $('.test').live('hover', function () {

            $(this).removeClass('not');
            $(this).addClass('selected');                     

        });
    });
</script>

like the above code you can identify links with selected separately. You can use any other event as 'hover' as well

hope this helps

Collectives™ on Stack Overflow

How to get a classic hover, active,etc. behavior with javascript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related