css实现tab资源-CSDN文库

共6个文件

html：4个

css：1个

js：1个

3星 · 超过75%的资源需积分: 7 64 浏览量 2008-06-12 14:43:51 上传评论收藏 10KB ZIP 举报

在网页设计中，Tab导航是一种常见的用户界面元素，它能够帮助用户在多个相关但内容独立的部分之间进行切换，从而提高网站或应用的可用性和用户体验。本文将深入探讨如何使用CSS来实现这种流行的Tab功能。理解Tab的基本结构至关重要。一个Tab组件通常包括两部分：Tab标签（也就是按钮）和与其对应的面板内容。每个Tab标签对应一个内容面板，当用户点击某个Tab时，相应的内容面板会被显示，其他则隐藏。以下是一个简单的HTML结构示例： ```html <div class="tabs"> <ul> <li><a href="#panel1">Tab 1</a></li> <li><a href="#panel2">Tab 2</a></li> <li><a href="#panel3">Tab 3</a></li> </ul> <div id="panel1" class="tab-content">  </div> <div id="panel2" class="tab-content">  </div> <div id="panel3" class="tab-content">  </div> </div> ``` 接下来，我们使用CSS来实现Tab的样式。CSS可以通过伪类选择器如`:hover`、`:active`和`:focus`来实现Tab的交互效果。例如，当鼠标悬停在Tab上时，可以改变其背景色和边框： ```css .tabs ul li { display: inline-block; margin-right: 10px; } .tabs ul li a { text-decoration: none; color: #333; padding: 8px 15px; border: 1px solid transparent; } .tabs ul li:hover a { border-color: #ddd; background-color: #f6f6f6; } .tabs ul li.active a { background-color: #fff; border-color: #ddd; border-bottom-color: transparent; } ``` 这里，`.tabs ul li.active a`表示当前选中的Tab，我们可以使用JavaScript来动态添加或移除这个类，以实现Tab的切换。为了实现Tab内容的显示和隐藏，可以使用CSS的`display`属性。默认情况下，所有的`.tab-content`都是隐藏的，只有与当前选中Tab对应的面板才显示： ```css .tab-content { display: none; } .tab-content.active { display: block; } ``` JavaScript部分，可以使用事件监听器来处理Tab的点击事件，切换Tab的激活状态并显示相应的内容面板： ```javascript document.addEventListener('DOMContentLoaded', function() { var tabs = document.querySelectorAll('.tabs ul li'); var contents = document.querySelectorAll('.tab-content'); tabs.forEach(function(tab, index) { tab.addEventListener('click', function(e) { e.preventDefault(); tabs.forEach(function(t) { t.classList.remove('active'); }); contents.forEach(function(c) { c.classList.remove('active'); }); tab.classList.add('active'); contents[index].classList.add('active'); }); }); }); ``` 以上就是一个基本的CSS实现的Tab组件。当然，实际项目中可能需要考虑更多细节，如响应式设计、动画效果等。EasyTabs1.2可能是某个Tab插件的版本号，这个插件可能会提供更丰富的功能和更易于使用的API，比如自动激活第一个Tab、通过URL参数设置默认激活的Tab等。使用CSS实现Tab组件需要理解HTML结构、CSS样式以及必要的JavaScript交互。通过结合这三者，我们可以创建出符合需求的、具有良好用户体验的Tab导航。

资源推荐

资源详情

资源评论

收起资源包目录

EasyTabs1_2.zip （6个子文件）

EasyTabs1.2

example_one_menu.html 5KB

example_three_menus.html 8KB

nice_structure

easytabs.js 2KB

menu.css 776B

example_one_menu.html 2KB

example_two_menus.html 7KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Easy Tabs 1.2 - presented by Kollermedia.at</title> <style type="text/css"> body {font-family:Arial, Helvetica, sans-serif; font-size:11px;} /*Example for a Menu Style*/ .menu {background-color:#008bd3;border-bottom:1px solid #d7d7d7; height:23px;width:300px;} .menu ul {margin:0px; padding:0px; list-style:none; text-align:center;} .menu li {display:inline; line-height:23px;} .menu li a {color:#ffffff; text-decoration:none; padding:5px 5px 6px 5px; } .menu li a.tabactive {border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; color:#000000; background-color:#ffffff; font-weight:bold; position:relative;} #tabcontent1,#tabcontent2,#tabcontent3,#tabcontent4,#anothercontent1,#anothercontent2, #anothercontent3, #anothercontent4,#anothercontent5, #anothercontent6, #contentthree1, #contentthree2, #contentthree3 {border:1px solid #ececec; width:298px; text-align:center;padding:6px 0px; font-size:12px; margin-bottom:5px;} </style> <script type="text/javascript"> /* EASY TABS 1.2 Produced and Copyright by Koller Juergen www.kollermedia.at | www.austria-media.at Need Help? http:/www.kollermedia.at/archive/2007/07/10/easy-tabs-12-now-with-autochange You can use this Script for private and commercial Projects, but just leave the two credit lines, thank you. */ //EASY TABS 1.2 - MENU SETTINGS //Set the id names of your tablinks (without a number at the end) var tablink_idname = new Array("tablink","anotherlink", "linkthree") //Set the id names of your tabcontentareas (without a number at the end) var tabcontent_idname = new Array("tabcontent","anothercontent", "contentthree") //Set the number of your tabs in each menu var tabcount = new Array("4","6","3") //Set the Tabs wich should load at start (In this Example:Menu 1 -> Tab 2 visible on load, Menu 2 -> Tab 5 visible on load , Menu 3 -> Tab 1 visible on load) var loadtabs = new Array("2","5","1") //Set the Number of the Menu which should autochange (if you dont't want to have a change menu set it to 0) var autochangemenu = 2; //the speed in seconds when the tabs should change var changespeed = 2; //should the autochange stop if the user hover over a tab from the autochangemenu? 0=no 1=yes var stoponhover = 1; //END MENU SETTINGS /*Swich EasyTabs Functions - no need to edit something here*/ function easytabs(menunr, active) {if (menunr == autochangemenu){currenttab=active;}if ((menunr == autochangemenu)&&(stoponhover==1)) {stop_autochange()} else if ((menunr == autochangemenu)&&(stoponhover==0)) {counter=0;} menunr = menunr-1;for (i=1; i <= tabcount[menunr]; i++){document.getElementById(tablink_idname[menunr]+i).className='tab'+i;document.getElementById(tabcontent_idname[menunr]+i).style.display = 'none';}document.getElementById(tablink_idname[menunr]+active).className='tab'+active+' tabactive';document.getElementById(tabcontent_idname[menunr]+active).style.display = 'block';}var timer; counter=0; var totaltabs=tabcount[autochangemenu-1];var currenttab=loadtabs[autochangemenu-1];function start_autochange(){counter=counter+1;timer=setTimeout("start_autochange()",1000);if (counter == changespeed+1) {currenttab++;if (currenttab>totaltabs) {currenttab=1}easytabs(autochangemenu,currenttab);restart_autochange();}}function restart_autochange(){clearTimeout(timer);counter=0;start_autochange();}function stop_autochange(){clearTimeout(timer);counter=0;} window.onload=function(){ var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]); a++; b++;}while (b<=menucount); if (autochangemenu!=0){start_autochange();} } </script> </head> <body> <h2>Easy Tabs 1.2 - Example with 2 normal and 1 changing Menu</h2>  <div class="menu"> <ul> <li><a href="#" onmouseover="easytabs('1', '1');" onfocus="easytabs('1', '1');" onclick="return false;" title="" id="tablink1">Tab 1</a></li> <li><a href="#" onmouseover="easytabs('1', '2');" onfocus="easytabs('1', '2');" onclick="return false;" title="" id="tablink2">Tab 2 </a></li> <li><a href="#" onmouseover="easytabs('1', '3');" onfocus="easytabs('1', '3');" onclick="return false;" title="" id="tablink3">Tab 3 </a></li> <li><a href="#" onmouseover="easytabs('1', '4');" onfocus="easytabs('1', '4');" onclick="return false;" title="" id="tablink4">Tab 4 </a> </li> </ul> </div>   <div id="tabcontent1">Tabcontent 1</div>   <div id="tabcontent2">Tabcontent 2</div>   <div id="tabcontent3">Tabcontent 3</div>   <div id="tabcontent4">Tabcontent 4</div>  <br/><br/>  <div class="menu"> <ul> <li><a href="#" onmouseover="easytabs('2', '1');" onfocus="easytabs('2', '1');" onclick="return false;" title="" id="anotherlink1">Tab 1</a></li> <li><a href="#" onmouseover="easytabs('2', '2');" onfocus="easytabs('2', '2');" onclick="return false;" title="" id="anotherlink2">Tab 2</a></li> <li><a href="#" onmouseover="easytabs('2', '3');" onfocus="easytabs('2', '3');" onclick="return false;" title="" id="anotherlink3">Tab 3</a></li> <li><a href="#" onmouseover="easytabs('2', '4');" onfocus="easytabs('2', '4');" onclick="return false;" title="" id="anotherlink4">Tab 4</a></li> <li><a href="#" onmouseover="easytabs('2', '5');" onfocus="easytabs('2', '5');" onclick="return false;" title="" id="anotherlink5">Tab 5</a></li> <li><a href="#" onmouseover="easytabs('2', '6');" onfocus="easytabs('2', '6');" onclick="return false;" title="" id="anotherlink6">Tab 6</a></li> </ul> </div>   <div id="anothercontent1">Tabcontent 1</div>   <div id="anothercontent2">Tabcontent 2</div>   <div id="anothercontent3">Tabcontent 3</div>   <div id="anothercontent4">Tabcontent 4</div>   <div id="anothercontent5">Tabcontent 5</div>   <div id="anothercontent6">Tabcontent 6</div>  <br/><br/>  <div class="menu"> <ul> <li><a href="#" onmouseover="easytabs('3', '1');" onfocus="easytabs('3', '1');" onclick="return false;" title="" id="linkthree1">Tab 1</a></li> <li><a href="#" onmouseover="easytabs('3', '2');" onfocus="easytabs('3', '2');" onclick="return false;" title="" id="linkthree2">Tab 2</a></li> <li><a href="#" onmouseover="easytabs('3', '3');" onfocus="easytabs('3', '3');" onclick="return false;" title="" id="linkthree3">Tab 3</a></li> </ul> </div>   <div id="contentthree1">Tabcontent 1</div>   <div id="contentthree2">Tabcontent 2</div>   <div id="contentthree3">Tabcontent 3</div>  <a href="#" onmousedown="javascript:stop_autochange(); return false;">Stop the Change</a> | <a href="#" onmousedown="javascript:restart_autochange(); return false;">Restart (if stopped)</a> <div style="background-color:#efefef; margin-top:25px; padding:8px;"> <strong>Settings setted for this menu:</strong><br/> <strong>loadtabs = 2, 5, 1 </strong> (load tab 2 in first, tab 5 in second and tab1 in the first menu at start)<br/> <strong>autochangemenu = 2 </strong>(set the second menu to autochange)<br/

评论收藏

内容反馈