Add Javascript to remove css class in Wordpress

Question

I want to add below javascript to wordpress homepage to remove css class.

I want to remove selected tab effects remove on mousehover to another tab in slider.

I have added below custom css in my style.css file to add effects to tabs in slider.

    .hesperiden .tp-tab:hover  {
        border-top: 3px solid #5db400;
    }

.hesperiden .tp-tab.selected {
        border-top: 3px solid #5db400;
    }

I have write below code using javascript to remove selected class on mousehover.

  $(".tp-tab").hover(
  function () {
    $(this).addClass(".tp-tab:hover");
  },
  function () {
    $(this).removeClass(".tp-tab.selected");
  }
);

As you can see second tab is selected in slider image, Suppose When I will hover on another tab the selected tab effects should be remove.

I am not sure that above Javascript code is correct or not and also where I should put this code in wordpress as this slider is only on homepage.

Please give some suggestion.

Thanks

you do not need to pass class name with a dot (.) in jQuery class methods like addClass,removeClass,switchClass etc.. jQuery handles that by itself. — techie_28
– techie_28, Commented Apr 1, 2016 at 5:51

rrk · Accepted Answer · 2016-04-01 05:46:31Z

4

Use like classes as space separated, not like a css selector.

$(this).removeClass("tp-tab selected");

But this is not really the scenario in your question. You would not want to remove class tp-tab because it is the main thing. If you remove class selected from the element, then it wont show the border by default.

Probably you are looking for this.

$(".tp-tab").mouseenter(function() {
  $('.tp-tab').removeClass("selected");
});

$(".tp-tab").mouseenter(function() {
  $('.tp-tab').removeClass("selected");
});
$(".tp-tab").click(function() {
  $(this).addClass("selected");
});

.tp-tab {
  padding: 5px;
  margin: 5px;
}
.tp-tab:hover {
  border-top: 3px solid #5db400;
}
.tp-tab.selected {
  border-top: 3px solid #5db400;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<br/>
<span class="tp-tab">test 1</span>
<span class="tp-tab">test 2</span>
<span class="tp-tab selected">test 3</span>
<span class="tp-tab">test 4</span>

edited Apr 1, 2016 at 5:46

answered Apr 1, 2016 at 5:19

rrk

15.9k4 gold badges32 silver badges49 bronze badges

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

4 Comments

Nikita Over a year ago

can you please tell me where should I put this code As I only want it for homepage. and as in my css hover class this is looks like tp-tab:hover so is it okay. in add class function I write it like this

rrk Over a year ago

@Nikita I added a demo with simple css only, Can you point out what changes you want?

Nikita Over a year ago

can you please add complete Javascript code. I tried this and its not working. I have added this code in page itself. (in page editor. )

Nikita Over a year ago

Yes perfect. thats what I wanted. Where should I put this JS code . Because I have added this code in WP home page and its not working.

Collectives™ on Stack Overflow

Add Javascript to remove css class in Wordpress

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related