我如何把这个JavaScript变成jQuery

Question

I am customising this W3Schools tutorial . I would like to use jQuery to add animation to the transition between tabs. This is the relevant line in javascript function

function showTab(n) {
  // This function will display the specified tab of the form ...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";

I have tried this but it doesn't work.

function showTab(n) {
  // This function will display the specified tab of the form ...
  var x = document.getElementsByClassName("tab");
  $("x[n]").show(750);
}

Answer 1

You're currently trying to get an element <xn="something"> . Simply remove the quotes so it's not a selector but a jQuery object:

function showTab(n) {
  var x = document.getElementsByClassName("tab");
  $(x[n]).show(750);
}

Answer 2

You need to provide the value of x[n] to the jQuery constructor, not as a string literal:

$(x[n]).show(750);

That being said if you want to fully convert this to jQuery you can use a jQuery object and the eq() method to retrieve an element within it by index:

function showTab(n) {
  $('.tab').eq(n).show(750);
}