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

Question

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');
   });

Norlihazmey Ghazali · Accepted Answer · 2015-06-23 02:49:05Z

1

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');
}

edited Jun 23, 2015 at 2:49

answered Jun 23, 2015 at 2:25

Norlihazmey Ghazali

9,0701 gold badge26 silver badges42 bronze badges

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

1 Comment

FeelRightz Over a year ago

hi this work ~ but everyone I click is white , how if when element is not selected return to color #666 back ?

Adarsh Gowda K R · Accepted Answer · 2015-06-23 02:54:30Z

1

here is shorthand code for that

 $("div.allgame_tabitem").on('click', function(e) {
     e.preventDefault();
     if ($(this).hasClass('selected')) {

         $(this).siblings('.tabtitle').css('color', '#fff');
     } else {

         $(this).addClass('selected');
         $(this).siblings('.tabtitle').css('color', '#fff');
         $(this).parent().siblings().find('.selected').removeClass('selected');
     }

 });

answered Jun 23, 2015 at 2:54

Adarsh Gowda K R

9618 silver badges15 bronze badges

Comments

Thomas Johansen · Accepted Answer · 2015-06-23 02:24:40Z

0

You may be referring to:

window.document.getElementByClassName("allgametap_wrapper").style.color = white;

A bit tricky to understand what you mean.

answered Jun 23, 2015 at 2:24

Thomas Johansen

15.3k3 gold badges16 silver badges24 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related