CODEWITHSUNDEEP
javascriptjqueryhtmlcsswordpress
Nikita
Nikita

Reputation: 57

Add Javascript to remove css class in Wordpress

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

enter image description here

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

Upvotes: 0

Views: 1741

Answers (1)

rrk
rrk

Reputation: 15846

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>

Upvotes: 4

Related Questions