javascript - transforming jquery to java script -
i have script made jquery using show / hide divs on page. need made purely in javascript , have no idea how this. me ??? think need converter or . . .
$("#optiuni").children().click(function(){ $("#" + $(this).attr('name')).show().siblings().hide(); /*gives link-activ class link clicked link-inactive others*/ $(this).attr('class','link-activ').siblings().attr('class','link-neactiv'); }); /*this makes shure first option list active incarcarea paginii*/ $("#optiuni li.prima").children().click(); sample markup:
<div id="lista"> <ul id="optiuni"> <li id="titlu-lista-p"> <p class="listname-t">past events </p></li> <li name="opt-1" class="prima"><a href="#"><p class="listdata">28.02.2011</p><p class="listname">tabu oscar party</p> </a></li> <li name="opt-2" ><a href="#"><p class="listdata">24.03.2011</p><p class="listname">cheese & wine</p></a></li> <li name="opt-8"><a href="#"><p class="listdata">08.04.2011</p><p class="listname">george baicea</p></a></li> </ul> </div> <div class="centru"> <div id="continut" > <div id="opt-2" class="galerie" style="background-color: black;"> <iframe id="gal" src="cheese/index.html"></iframe> </div> <div id="opt-1" class="galerie" style="background-color: black;"> <iframe src="tabu/index.html"></iframe> </div> <div id="opt-8" class="galerie" style="background-color: blue;"> <iframe src="no-ev/index.html"></iframe> </div> </div> </div>
here's example of how based on markup linked to in comment, there assumptions make based on jquery version don't hold when see markup.
// ie sucks function addevent(el, name, handler) { if (el.addeventlistener) { el.addeventlistener(name, handler, false); } else if (el.attachevent) { // make sure "this" references element we're adding event handler el.attachevent('on' + name, function() { handler.call(el, window.event); }); } } function eachelementsibling(el, func) { var childnodes = el.parentnode.childnodes; (var = 0, sibling; sibling = childnodes[i]; i++) { if (sibling.nodetype !== 1 || sibling === el) { continue; } func(sibling); } } function activatelink() { var eltoshow = document.getelementbyid(this.getattribute('name')); eltoshow.style.display = ''; eachelementsibling(eltoshow, function(s) { s.style.display = 'none'; }); this.classname = 'link-active'; eachelementsibling(this, function(s) { if (s.getattribute('name')) { s.classname = 'link-neactiv'; } }); } var items = document.getelementbyid('optiuni').getelementsbytagname('li'); var initialitem = null; (var = 0, item; item = items[i]; i++) { // need filter, non-link items present in list if (item.getattribute('name')) { addevent(item, 'click', activatelink); if (item.classname === 'prima') { initialitem= item; } } } if (initialitem) { activatelink.call(initialitem) }
Comments
Post a Comment