how to change other element css when selected element has new class


Tags: jquery,html,css

Problem :

Is that possible to change other element css when element has selected. For example the code bellow have div.allgametap_wrapper , inside have div.allgame_tabitem,div.clear and div.tabtitle . What I mean is I have using js to switch the class selected inside div.allgame_tabitem , when div.allgame_tabitem has class selected the div.tabtitle inside it self div.allgametap_wrapper will change to css #fff (white).

<div class="allgametap_wrapper">
    <div class="allgame_tabitem onlinegametab"></div>
    <div class="clear"></div>
    <div class="tabtitle" style="color:#666;"></div>
</div>
<div class="allgametap_wrapper">
    <div class="allgame_tabitem allgametab selected"></div>
    <div class="clear"></div>
    <div class="tabtitle" style="color:#666;"></div>
</div>  

JS Switch Selected Code

    $(".allgame_tab_container div div.allgame_tabitem").on('click', function (e) {
       e.preventDefault();
       var $this = $(this);
       $(".allgame_tab_container div div.allgame_tabitem").removeClass('selected');
       $this.addClass('selected');
   });


Solution :

It would be great If you can provide the js code of yours. Here is the illustration :

// $(this) would refer to current selected element
// this depend on your existed js code
if ( $(this).hasClass('selected') ) {
  $('.tabtitle').css('color','#666'); //<-- add this
  $(this).siblings('.tabtitle').css('color','#fff');
}

    CSS Howto..

    Best practice: How to use (repeat) CSS style attributes correctly?

    How to make a div fill the entire page height using css? [closed]

    how to align editor-label with editor-field in css

    How to position div at the bottom of a page

    How to make sure items are added to the end of a moving list?

    How to find equivalent property in Mozilla of given Webkit CSS property

    How can I get a CSS class selector to override the input[readonly] selector?

    How to place kartik typeahead above text input

    How load a table into multiple webpages using HTML?

    How do I get jQuery to change classes according to an If/Then statement. My 'home' link will not change class when another link clicked on

    How to avoid an hover on a menu item to affect the menu items on the right

    How to get the css with in inline styles using jquery

    how to inherit classes in css

    How to add more bars to this Animated JQuery, CSS and HTML Bar Graph

    How to add visual indicator of focus for Radio Button for Firefox

    How to center text with CSS?

    how to make textarea looks like input[text] on form invalid

    How to align nav bar to bottom of window with no gap between buttons and window edge

    How to make a DIV float on top of another DIV without pushing down the CSS Underneath

    How not to use body style css rule in part of html code?

    How to get html data-attribute value in css regular expressions

    How to change url of image which is generated dynamically just by using CSS and media queries?

    how to apply div on hover my table td

    How do I center my responsive form and align it evenly with everything else?

    How to apply CSS class on current element using jQuery

    How to create a template that will show only in IE6 using javascript?

    CSS - How to crop an image to a square, if it's already square then resize it

    How to remove and override CSS attribute from parent class?

    How do you indent subsequent lines of text using

    How to create a 100% fixed footer with a fixed width center transparent gap?