remove and add class with javascript on page load issue

Question

When i add or remove a class with javascript then reload the page ..

it wont work

I tried this code, and put it in on the header

<script>
    $(document).ready(function() {
  $('.boxAdRight').removeClass('boxAdRight').addClass('active');
});
</script>

and this is my HTML I want to remove the class boxAdRight and change it with .active class

<div class="panel-body">
   <div class="tab-content">
      <div class="tab-pane fade in active" id="data">
         <div class="getData">
            <div class="row">
               <div class="col-md-12 col-sm-12 col-xs-12">
                  <div class="servers">
                     <ul>
                        <li class="active" 
                           id="s_0"onclick="getServer(this.id,0);"> 
                           <i class="fa fa-video-camera"></i> server1
                        </li>
                     </ul>
                  </div>
               </div>
               <div class="col-md-3 col-sm-4 col-xs-12 fRight">
                  <div class="episodes boxAdRight">
                     <h2>episodes</h2>
                     <ul>
                        <li>
                           <a href="http://localhost/wordpress/newarticle13/">                                  episode 1</a>
                        </li>
                        <li class="active"><a href="http://localhost/wordpress/newarticle13/"> episode 2</a>
                        </li>
                     </ul>
                  </div>
               </div>
               <div class="col-md-9 col-sm-8 col-xs-12 fRight">
                  <div class="boxVideos">
                     <div class="getCode"><iframe src="https://*******" scrolling="no" frameborder="0" width="700" height="430" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

thank you

what do you mean by "it won't work?" have you checked your browser console on error messages? — errand
– errand, Commented Sep 17, 2018 at 13:34
thank you for your reply, yes i checked my browser, no errors ! — bilalchina
– bilalchina, Commented Sep 17, 2018 at 13:40
you change the class with javascript and that's ok. Then you say you reload the page. Are you saying that you expect the change to be persistent on page reload? — user2399035
– user2399035, Commented Sep 17, 2018 at 13:53
@LelioFaieta That reloading page part caught my eye too, however the code should execute the same way every time the page is loaded, so I'm still confused as to what the OP's issue is. Unclear. — j08691
– j08691, Commented Sep 17, 2018 at 14:03
I'm working on wordpress, I can see the code of javascript on source code of the page, but nothing change — bilalchina
– bilalchina, Commented Sep 17, 2018 at 14:17

vlad lintes · Accepted Answer · 2018-09-17 13:41:25Z

4

As a first observation I would like to mention the fact that JQuery's removeClass function returns one or more space separated class names that should be removed. As a consequence, you should not apply addClass over the result of removeClass.

There might be other issues also in your code though...

answered Sep 17, 2018 at 13:41

vlad lintes

412 bronze badges

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

Comments

Nitin Vaghani · Accepted Answer · 2018-09-17 14:08:41Z

1

Replace your .boxAdRight class with .episodes class and it'll work as you want.

  <script>
        $(document).ready(function() {
            $(".episodes").removeClass("boxAdRight").addClass("active");
       });
    </script>

answered Sep 17, 2018 at 14:08

Nitin Vaghani

3074 silver badges14 bronze badges

2 Comments

j08691 Over a year ago

Works fine with it

Nitin Vaghani Over a year ago

Have you removed "episodes" class from " <div class="episodes boxAdRight">" this line? OR Check in private browser or CTRL+F5. may be it's cache issue.

Michael Hurley · Accepted Answer · 2018-09-17 13:43:55Z

0

I believe that the order of the method calls should be

$('.boxAdRight').addClass('active').removeClass('boxAdRight');

In the original example $('.boxAdRight').removeClass('boxAdRight').addClass('active'); the selector .boxAdRight is being used, but then that class is being removed with .removeClass('boxAdRight'), so .addClass('active') is being called on a selector with no matching elements.

answered Sep 17, 2018 at 13:43

Michael Hurley

3692 gold badges5 silver badges15 bronze badges

1 Comment

j08691 Over a year ago

No, this is not correct. It will work fine. Testing a simple example demonstrates this. jsfiddle.net/j08691/2aqt7uow

Muhammed Sami · Accepted Answer · 2018-09-17 13:48:58Z

0

get it like that will solve it

$('.episodes').addClass('active').removeClass('boxAdRight');

in normal case yours too must work ?

answered Sep 17, 2018 at 13:48

Muhammed Sami

1109 bronze badges

2 Comments

Muhammed Sami Over a year ago

I tried on jsfiddle.net/j08691/2aqt7uow and its working well ! if you wanna have active class. open the console with f 12 and you will see active is added to your div

bilalchina Over a year ago

yes i see, it works for you, but in my case, I'm working on wordpress, and I added the code in <head> section of header.php

Nadiia · Accepted Answer · 2018-09-17 13:55:51Z

-1

You can also simplify this code by replacing of class instead of removing it.

$('.boxAdRight').className = 'active';

how to replace class HTML name with javascript

answered Sep 17, 2018 at 13:55

Nadiia

11 bronze badge

1 Comment

bilalchina Over a year ago

thank you, I tried that code too, but tha class still

Collectives™ on Stack Overflow

remove and add class with javascript on page load issue

5 Answers 5

Comments

2 Comments

1 Comment

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

1 Comment

2 Comments

1 Comment

Linked

Related