特效描述:滑块导航 顶部固定。jQuery滑块导航顶部固定特效代码下载
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/style.css">
2. 引入JS
<script src="js/jquery.min.js"></script> <script src="js/script.js"></script>
3. HTML代码
<section class="et-hero-tabs"> <h1>粘性滑块导航</h1> <h3>滑动内容与粘性选项卡导航</h3> <div class="et-hero-tabs-container"> <a class="et-hero-tab" href="#tab-es6">ES6</a> <a class="et-hero-tab" href="#tab-flexbox">Flexbox</a> <a class="et-hero-tab" href="#tab-react">React</a> <a class="et-hero-tab" href="#tab-angular">Angular</a> <a class="et-hero-tab" href="#tab-other">Other</a> <span class="et-hero-tab-slider"></span> </div> </section> <!-- Main --> <main class="et-main"> <section class="et-slide" id="tab-es6"> <h1>ES6</h1> <h3>something about es6</h3> </section> <section class="et-slide" id="tab-flexbox"> <h1>Flexbox</h1> <h3>something about flexbox</h3> </section> <section class="et-slide" id="tab-react"> <h1>React</h1> <h3>something about react</h3> </section> <section class="et-slide" id="tab-angular"> <h1>Angular</h1> <h3>something about angular</h3> </section> <section class="et-slide" id="tab-other"> <h1>Other</h1> <h3>something about other</h3> </section> </main> <script src="js/jquery.min.js"></script>