将 jquery 转换为 javascript

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

这是一个示例，说明如何根据评论中的 markup you linked to 执行此操作，因为您可以根据 jQuery 版本做出一些假设，当您看到标记时这些假设不成立。

jsFiddle with a live example.

// 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)
}