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

将jquery转换为javascript

1 个答案: