Voir Tab en PHP en utilisant Mootools

Question

Je voudrais créer une vue onglet juste en masquer et afficher div élément avec mootools.I am stucked en utilisant Mootools et s'embrouillait.

Suite liste générée dynamiquement à partir de php et nous ne pouvons pas deviner l'identifiant de l'élément. Lorsque nous cliquons sur chaque élément de la liste; il doit appliquer la classe active pour le même et supprimer la classe active de l'élément de liste en cours.

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

Comment peut-on appliquer une boucle dans le javascript. S'il vous plaît tout organisme peut me aider à écrire la fonction javascript script pour same.Thanks à l'avance

Answer 1

est ici vos onglets rapides en 10 minutes à Mootools (Les meilleurs résultats en FF en raison de style CSS3 rapide): 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"); 
     } 
    }); 

})(); 

note que je fais quelques légers changements dans le balisage, mais il devrait être assez pour vous aider à démarrer