<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery/CSS3实现超酷的动画Tab菜单DEMO演示</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<div class="wrapper">
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<section class="tabs-section"><nav class="tabs-wrapper"><input type="radio" name="tab" id="tab1" checked="checked"/><label for="tab1"><span>Example Tab</span></label><input type="radio" name="tab" id="tab2"/><label for="tab2"><span>Tab Two</span></label><input type="radio" name="tab" id="tab3"/><label for="tab3"><span>Tab Three</span></label><input type="radio" name="tab" id="tab4"/><label for="tab4"><span>Another Tab</span></label><div class="tabs-content"><section><h1>Hi There!</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem repudiandae magni reprehenderit quibusdam, molestias sequi, voluptate quam id porro eaque placeat laboriosam quis quo. Repellat culpa veritatis quae non impedit.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem repudiandae magni reprehenderit quibusdam, molestias sequi, voluptate quam id porro eaque placeat laboriosam quis quo. Repellat culpa veritatis quae non impedit.</p></section><section><h2>Oh hi! I'm the second tab</h2><h3>... aaaaaand</h3><h4>That's all...</h4><h5>... ...</h5><h6>this is awkward :s</h6></section><section><h2>I'm the best tab</h2><h3>Because reasons</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis eum nihil voluptatibus beatae aliquam eius, numquam ut ex natus repudiandae dolorum ea fugiat fugit blanditiis cum velit sint, quod consectetur.</p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo a qui exercitationem recusandae hic maxime suscipit veniam harum, quod fuga beatae aliquid quia, earum ratione dolorum obcaecati quaerat natus. Nemo!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero debitis repellat odio doloribus nam ad magnam quia a nihil ut voluptates hic aliquam quos pariatur explicabo, quo tenetur, non? Iste!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero debitis repellat odio doloribus nam ad magnam quia a nihil ut voluptates hic aliquam quos pariatur explicabo, quo tenetur, non? Iste!</p></section><section><h2><- No you're not</h2><h3>Because I've images</h3><img src="http://imgs.xkcd.com/comics/standards.png"/><img src="http://imgs.xkcd.com/comics/duty_calls.png"/><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero debitis repellat odio doloribus nam ad magnam quia a nihil ut voluptates hic aliquam quos pariatur explicabo, quo tenetur, non? Iste!</p></section></div></nav></section></div>
</body>
</html>
基于jQuery+CSS3实现超酷的动画Tab菜单效果源码.zip
版权申诉
20 浏览量
2022-11-10
00:33:57
上传
评论
收藏 7KB ZIP 举报
基于jQuery+CSS3实现超酷的动画Tab菜单效果源码.zip （6个子文件） 
132686895858690914 css 
style.css 11KB normalize.css 2KB index.jade 3KB config.rb 752B
index.html 3KB scss style.scss 3KB资源评论
毕业_设计
- 粉丝: 1944
- 资源: 1万+
