📌  相关文章
📜  MooTools-选项卡式内容

📅  最后修改于: 2020-10-22 06:38:29             🧑  作者: Mango

选项卡式内容是指选项卡式区域中存在的内容以及与列表项相关的内容。每当我们执行任何操作（如悬停或单击列表项）时，立即反应都会对选项卡式内容产生影响。

让我们讨论更多有关选项卡的信息。

创建简单标签

将鼠标悬停在列表项上时，创建简单的菜单选项卡可帮助您浏览其他信息。首先，创建一个包含项目的无序列表，然后创建div，每个div对应一个项目。让我们看一下下面的HTML代码。

脚本



    
   
  • One
    • 
   
  • Two
    • 
   
  • Three
    • 
   
  • Four
    •

让我们使用CSS为上述HTML代码提供一些基本支持，以帮助隐藏数据。看一下下面的代码。

.hidden {
   display: none;
}

现在让我们编写一个具有选项卡功能的MooTools代码。看一下下面的代码。

示例片段

//here are our functions to change the styles
var showFunction = function() {
   this.setStyle('display', 'block');
}
var hideFunction = function() {
   this.setStyle('display', 'none');
}
window.addEvent('domready', function() {
   //here we turn our content elements into vars
   var elOne = $('contentone');
   var elTwo = $('contenttwo');
   var elThree = $('contentthree');
   var elFour = $('contentfour');
   //add the events to the tabs
   
   $('one').addEvents({
      //set up the events types
      //and bind the function with the variable to pass
      'mouseenter': showFunction.bind(elOne),
      'mouseleave': hideFunction.bind(elOne)
   });
   
   $('two').addEvents({
      'mouseenter': showFunction.bind(elTwo),
      'mouseleave': hideFunction.bind(elTwo)
   });
   
   $('three').addEvents({
      'mouseenter': showFunction.bind(elThree),
      'mouseleave': hideFunction.bind(elThree)
   });
   
   $('four').addEvents({
      'mouseenter': showFunction.bind(elFour),
      'mouseleave': hideFunction.bind(elFour)
   });
});

结合以上代码，您将获得适当的功能。

例


      
      
      
      
   
   
   
      
      
    
         
  • One
    • 
         
  • Two
    • 
         
  • Three
    • 
         
  • Four
    •

输出

将鼠标指针放在列表项上，然后您将获得相应项目的其他信息。

Marph内容标签

通过扩展代码，我们可以在显示隐藏内容时添加一些变形功能。我们可以通过使用Fx.Morph效果而不是样式来实现。

看一下下面的代码。

例


      
      
      
      
   
   
   
      
      
    
         
  • One
    • 
         
  • Two
    • 
         
  • Three
    • 
         
  • Four
    • 
      

      
      
      
content for one

      
content for two

      
content for three

      
content for four

输出

单击列表中的任何一项，然后您会在选项卡上获得更多信息。