Is there a way to convert this jquery code to javascript?

Question

I'm trying to create a tab menu. And I need this coded in regular javascript, not jquery.

$(document).ready(function() {
//When page loads...
$(".general_info_content").hide(); //Hide all content
$("ul.general_info_tabs li:first").addClass("active").show(); //Activate first tab
$(".general_info_content:first").show(); //Show first tab content

//On Click Event
$("ul.general_info_tabs li").click(function() {

    $("ul.general_info_tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".general_info_content").hide(); //Hide all tab content

    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
});
});

I have to ask, why? jQuery is regular JavaScript and replicating all that, particularly the animation would be tedious and redundant — Phil
– Phil, Commented Aug 8, 2011 at 0:42
Sure. All you have to do is write a library that's functionally equivalent to jQuery (at least for the functionality you need) and reference that instead of referencing jQuery. Fortunately, that work has already been done for you. — David
– David, Commented Aug 8, 2011 at 0:49
I'm trying to make a listing on Ebay and Ebay doesn't allow jquery. The tabbed menu I'm trying to replicate can be found in this tutorial:sohtanaka.com/web-design/simple-tabs-w-css-jquery — Skylar
– Skylar, Commented Aug 8, 2011 at 0:54
No one here would reverse engineer for that many hours.. You're not going to be able to use interactive like stuff on e-bay. I would start looking into a CSS Tab menu. — Xeo
– Xeo, Commented Aug 8, 2011 at 0:57

Brian · Accepted Answer · 2011-08-08 01:31:47Z

1

The core of what you want to do is below - I'm sure there are a thousand different ways to do each task:

Remove a CSS class from an element:

var classes = document.getElementById([id]).className.split(" ");
for(var i = 0; i < classes.length; i++)
    if(classes[i] == removeClass) 
          classes[i] = "";
document.getElementById([id]).className = classes.join(" ");

Add a CSS class to an element:

document.getElementById([i]).className += " " + addClassName;

Hide an element:

document.getElementById([i]).style.display = "none";

Fade an element:

// not tested, but based on tested/used code
function fade(el, opacity, fadeInTime) {
     if (opacity < 100) {
          el.style.opacity = opacity / 100;
          el.style.filter = "alpha(opacity=" + opacity + ")";
          opacity += 5;

          setTimeout(function () { fade(el, opacity, fadeInTime); }, fadeInTime / 5);
     }
}

To find all elements by CSS and tag name:

var matches = new Array();
var all = document.getElementByTagName(searchTagName);
for(var i = 0; i < all.length; i++){
     if(all[i].className.replace(searchClassName, "") != all[i].className) {
           matches.push(all[i].className);
     }
}
// do something with (i.e., return or process) matches

And for the record, I find it encouraging, not unreasonable, that a person using the jQuery library wants to know how to do get things done with native JS/DOM.

edited Aug 8, 2011 at 1:31

answered Aug 8, 2011 at 1:18

Brian

2,78116 silver badges12 bronze badges

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

1 Comment

Jules Over a year ago

That is good, but the messy bit is to find an element using css selector. If I were the OP, I would re-write the html to use id instead of css selector.

Jules · Accepted Answer · 2011-08-08 01:35:51Z

More functions to complement Brian's post. Good luck.

EDIT: As I mentioned I would change the class=general_info_content to id=general_info_content1.

  function attach(el, event, fnc) {
      //attach event to the element
      if (el.addEventListener) {
          el.addEventListener(event, fnc, false);
      }
      else if (document.attachEvent) {
          el["on" + event] = fnc;  // Don not use attachEvent as it breaks 'this'
      }
  }

  function ready() {
    // put all your code within $(function(){}); here.
  }

  function init() {
      attach(document, "readystatechange", function () {
          if (document.readyState == "complete") {
              ready();
          }
      });
  }

Collectives™ on Stack Overflow

Is there a way to convert this jquery code to javascript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related