滑动菜单，Tab，选项卡，横向，竖向都有

2024-09-05 12:20:28

字体：大中小

来源：转载

供稿：网友

这一个特效将网页中的选项卡滑动门都集中到一个网页中来，有些同志曾经为同一个页面布置两个滑动门而烦恼，参考一下本例子，相信你会找到答案，而且有各种排列方式的选项卡，总有一款会满足你。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN"><head><title>选项卡</title><style type="text/css"></style></head><body><div id="tab01">	<h3>首页</h3>		<div class="jj"><p>嘿嘿，无视div原始class值。</p></div>	<h3 class="pr">测试</h3>		<div><p>继续无视h3原始class值。</p></div>	<h3>无聊</h3>		<div><p>h3没有值也可以～</p></div>	<h3 class="box">傻蛋</h3>		<div><p>div没有值一样可以～</p></div></div><div id="tab02">	<h4>首页</h4>		<ol class="pr"><li>嘿嘿，无视容器原始class值。</li></ol>	<h4 class="box">测试</h4>		<ol><li>继续无视h3原始class值。</li></ol>	<h4>无聊</h4>		<ol><li>h3没有值也可以～</li></ol>	<h4 class="bb">傻蛋</h4>		<ol><li>div没有值一样可以～</li></ol></div><div id="tab03">	<h3>首页</h3>		<div class="tab"><p>嘿嘿，无视h3原始class值。</p></div>	<h3>测试</h3>		<div class="tab wushi"><p>继续无视div原始class值。</p></div>	<h3>无聊</h3>		<div class="tab"><p>h3没有值也可以～</p></div>	<h3 class="box">傻蛋</h3>		<div class="tab tab123"><p>class值相似一样也可以～</p><div><p>指定class后，即时再多一个div也行。</p></div></div></div><script type="text/javascript"></script></body></html>

上一篇：定时自动切换的选项卡Tab

下一篇：CSS伪类实现的鼠标滑动图片链接