CSS+JS简洁实用的滑动导航栏

2024-09-05 12:20:24

字体：大中小

来源：转载

供稿：网友

这个滑动门示例虽然简洁，介理却很实用，很多门户都在用，不一定复杂的东西就是好，要根据自己的需要，用户的需要适可而止，贵在使用，而不要炫技，您说呢？

<!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=gb2312" /><title>滑动门导航</title><style type="text/css">*{ margin:0; padding:0; font-size:12px;}body{ margin:5px;}.Tab{ width:300px;}.TabBar{ width:300px; list-style-type:none;}.TabBarNormal{ float:left; width:60px; border:1px solid #0066CC; border-bottom:0px solid #fff; line-height:24px; text-align:center; margin:0 3px;}.TabBarActive{ float:left; width:60px; border:1px solid #0066CC; border-bottom:0px solid #fff; background-color:#EEEEEE; line-height:25px; text-align:center; margin:0 3px; color:red}.TabContent{ width:100%; height:200px; border:1px solid #0066CC; padding:5px; position:absolute; margin-top:-1px;}</style></head><body><div class="Tab"> <ul class="TabBar">  <li id="tab1" class="TabBarActive" onmouseover="showTab(1);">ASP</li>  <li id="tab2" class="TabBarNormal" onmouseover="showTab(2);">PHP</li>  <li id="tab3" class="TabBarNormal" onmouseover="showTab(3);">AJAX</li> </ul> <div class="TabContent" id="tabContent1">ASP源代码</div> <div class="TabContent" id="tabContent2" >PHP精品源代码</div> <div class="TabContent" id="tabContent3" >Ajax资源脚本</div></div><script type="text/javascript">var activeTab =1;var activeTabContent = 1;var i;for (i=2;i<=3;i++) { document.getElementById("tabContent"+i).style.display="none";}function showTabContent(n) { document.getElementById("tabContent"+activeTabContent).style.display="none"; document.getElementById("tabContent"+n).style.display=""; activeTabContent=n;}function showTab(n) { document.getElementById("tab"+activeTab).className="TabBarNormal"; document.getElementById("tab"+n).className="TabBarActive"; activeTab=n; showTabContent(n);}</script></body></html>

上一篇：JS+CSS点击收缩展开的竖直菜单

下一篇：Windows 风格选项卡标签

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注