преобразование JQuery в Java-скрипт

Question

У меня есть этот скрипт, созданный с помощью jQuery, который я использую, чтобы показать / скрыть div на моей странице. Мне действительно нужно, чтобы это было сделано исключительно на JavaScript, и я понятия не имею, как это сделать. Кто-нибудь может мне помочь ??? Я думаю, что мне нужен конвертер или что-то. , ,

$("#optiuni").children().click(function(){
    $("#" + $(this).attr('name')).show().siblings().hide();
    /*Gives the  link-activ class to the link that i clicked an link-inactive to all others*/
    $(this).attr('class','link-activ').siblings().attr('class','link-neactiv');
});
/*this makes shure that the first option from my list is active  incarcarea paginii*/
$("#optiuni li.prima").children().click();

Пример разметки:

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

Answer 1

Вот пример того, как вы могли бы сделать это, основываясь на разметке , которую вы указали в комментарии , поскольку есть некоторые предположения, которые вы можете сделать на основе версии jQuery, которые не сохраняются, когда вы видите разметка.

jsFiddle с живым примером .

// IE sucks
function addEvent(el, name, handler) {
  if (el.addEventListener) {
    el.addEventListener(name, handler, false);
  } else if (el.attachEvent) {
    // Make sure "this" references the element we're adding the event handler to
    el.attachEvent('on' + name, function() { handler.call(el, window.event); });
  }
}

function eachElementSibling(el, func) {
  var childNodes = el.parentNode.childNodes;
  for (var i = 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;
for (var i = 0, item; item = items[i]; i++) {
  // Need to filter, as non-link items are also present in the list
  if (item.getAttribute('name')) {
    addEvent(item, 'click', activateLink);
    if (item.className === 'prima') {
      initialItem= item;
    }
  }
}
if (initialItem) {
  activateLink.call(initialItem)
}