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. 
	

	

		复制

	实例预览 »



	 


      



  

  
  

   
    
    
   

  

  
 
 

 
 
  
 
 
 
 






 






相关教程