Tab View в PHP с помощью Mootools

Question

Я хотел бы создать представление табуляции только с помощью элемента hide и show div с помощью mootools.Я застрял с помощью mootools и запутался.

Следующий список, сгенерированный динамически с php, и мы не можем угадать идентификатор элемента. Когда мы нажимаем на каждый элемент списка; он должен применять активный класс для того же самого и удалить активный класс из текущего элемента списка.

<div class="lorem_ipsum"> 
<div class="lorem"> 
    <ul id="main_tabs"> 
     <li id="815" class="active" onclick="tabManage()">Lorem Ipsum</li> 
      <li id="816" onclick="tabManage()">John</li> 
      <li id="817" onclick="tabManage()">Lorem Text</li> 
     <li id="818" onclick="tabManage()">Demo Text</li> 
    </ul> 
</div> 

<script language="javascript"> 
function tabManage() 
{ 

$('815').addClass = "active"; 

$('816').removeClass = "active"; 

$('817').removeClass = "active"; 

$('818').removeClass = "active"; 
} 
</script> 

Как мы можем применить цикл в JavaScript. Пожалуйста, любое тело может помочь мне написать яваскрипт функцию сценария для same.Thanks заранее

Answer 1

вот ваши быстрые вкладки в 10 минут в MooTools (лучше всего рассматривать в FF из-за быстрый CSS3 стайлинг): http://www.jsfiddle.net/dimitar/THQWn/

(function() { 
    // closure - to be run in a domready block. 
    var tabs = document.id("main_tabs").getElements("li"); 
    var output = document.id("output"), divs = output.getChildren(); 

    tabs.addEvents({ 
     click: function(e) { 
      // clear up all tabs of 'active' 
      tabs.removeClass("active"); 
      // make this active and remove the mouseover effect 
      this.addClass("active").removeClass("over"); 

      // make all content hidden 
      divs.addClass("hide"); 

      // remove hidden class from the div that links to our id. 
      output.getElement("div[rel=" + this.get("id") + "]").removeClass("hide"); 
     }, 
     mouseenter: function() { 
      if (!this.hasClass("active")) 
       this.addClass("over"); // not applicable to active 
     }, 
     mouseleave: function() { 
      this.removeClass("over"); 
     } 
    }); 

})(); 

обратите внимание, что я делаю небольшие изменения в разметке, но этого должно быть достаточно, чтобы вы начали