CODEWITHSUNDEEP
jqueryhtmlcss
FeelRightz
FeelRightz

Reputation: 2979

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

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

Upvotes: 2

Views: 546

Answers (3)

Adarsh Gowda K R
Adarsh Gowda K R

Reputation: 951

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

 });

Upvotes: 1

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

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

Upvotes: 1

Thomas Johansen
Thomas Johansen

Reputation: 15238

You may be referring to:

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

A bit tricky to understand what you mean.

Upvotes: 0

Related Questions