VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >

  • HTML5 教程之Foundation 选项卡

选项卡导航可以很好的展示不同的内容，并可以对内容进行切换。

选项卡使用 <ul class="tabs" data-tab> 来创建, 各个选项使用 <li> 元素并加上 .tab-title 类来创建。

提示: 当前选中项可以使用 .active 类。

实例



    

  1. 
 <ul class="tabs" data-tab>
    2. 

  2. 
  <li class="tab-title active"><a href="#">Home</a></li>
    3. 

  3. 
  <li class="tab-title"><a href="#">Menu 1</a></li>
    4. 

  4. 
  <li class="tab-title"><a href="#">Menu 2</a></li>
    5. 

  5. 
  <li class="tab-title"><a href="#">Menu 3</a></li>
    6. 

  6. 
</ul>
    7. 




复制

实例预览 »



垂直的选项卡



垂直选项卡可以使用 .vertical 类:





实例




    

  1. 
<ul class="tabs vertical" data-tab>
    2. 




复制

实例预览 »



切换选项卡



如果要设置切换标签，可以使用 <div> 元素加上 .content 类。每个选项卡上加上唯一的 ID, 并连接到列表项 (<a href="#menu1" 将打开 id="menu1" 的选项内容)。最后将所有的选项内容放在 <div> 元素上，该 <div> 元素需要添加 .tabs-content 类，并初始化 Foundation JS。



注意 .active 类会自动添加到当前选中的选项卡上：





实例




    

  1. 
  <ul class="tabs" data-tab>
    2. 

  2. 
  <li class="tab-title active"><a href="#home">Home</a></li>
    3. 

  3. 
  <li class="tab-title"><a href="#menu1">Menu 1</a></li>
    4. 

  4. 
  <li class="tab-title"><a href="#menu2">Menu 2</a></li>
    5. 

  5. 
  <li class="tab-title"><a href="#menu3">Menu 3</a></li>
    6. 

  6. 
</ul>
    7. 

  7. 
<div class="tabs-content">
    8. 

  8. 
  <div class="content active" id="home">
    9. 

  9. 
    <h3>HOME</h3>
    10. 

  10. 
    <p>Home is where the heart is..</p>
    11. 

  11. 
  </div>
    12. 

  12. 
  <div class="content" id="menu1">
    13. 

  13. 
    <h3>Menu 1</h3>
    14. 

  14. 
    <p>Some text, blabla</p>
    15. 

  15. 
  </div>
    16. 

  16. 
  <div class="content" id="menu2">
    17. 

  17. 
    <h3>Menu 2</h3>
    18. 

  18. 
    <p>Some other text.</p>
    19. 

  19. 
  </div>
    20. 

  20. 
  <div class="content" id="menu3">
    21. 

  21. 
    <h3>Menu 3</h3>
    22. 

  22. 
    <p>Last tab.</p>
    23. 

  23. 
  </div>
    24. 

  24. 
</div>
    25. 

  25. 
 
    26. 

  26. 
<!-- Initialize Foundation JS -->
    27. 

  27. 
<script>
    28. 

  28. 
$(document).ready(function() {
    29. 

  29. 
    $(document).foundation();
    30. 

  30. 
})
    31. 

  31. 
</script>
    32. 




复制

实例预览 »



选项卡淡入



使用 CSS 来自定义选项卡淡入的效果：





实例




    

  1. 
.tabs-content > .content.active {
    2. 

  2. 
    -webkit-animation: fadeEffect 1s;
    3. 

  3. 
    animation: fadeEffect 1s;
    4. 

  4. 
}
    5. 

  5. 
 
    6. 

  6. 
@-webkit-keyframes fadeEffect {
    7. 

  7. 
    from {opacity: 0;}
    8. 

  8. 
    to {opacity: 1;}
    9. 

  9. 
}
    10. 

  10. 
 
    11. 

  11. 
@keyframes fadeEffect {
    12. 

  12. 
    from {opacity: 0;}
    13. 

  13. 
    to {opacity: 1;}
    14. 

  14. 
}
    15. 




复制

实例预览 »



 






    













相关教程