简单的选项卡切换代码
选项卡效果展示:
该效果用到jQuery 遍历siblings(),如果不熟悉这个的朋友自学一下哈。
html:
<div style="width:420px;margin:40px auto;"> <div class="tabPanel"> <ul> <li class="hit">Tab1</li> <li>Tab2</li> <li>Tab3</li> </ul> <div class="panes"> <div class="pane" style="display:block;"> <h4>First tab content</h4> <p>First tab content</p> </div> <div class="pane"> <h4>Secend tab content</h4> <p>First tab content</p> </div> <div class="pane"> <h4>Third tab content</h4> <p>First tab content</p> </div> </div> </div> </div>
js代码:
<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.tabPanel ul li').click(function(){ $(this).addClass('hit').siblings().removeClass('hit'); $('.panes .pane:eq('+$(this).index()+')').show().siblings().hide(); }) }) </script>
css样式:
.tabPanel ul { height: 30px; border-bottom: 1px solid #aaa; } .tabPanel ul li { float: left; margin: 0 2px 0 0; border: 1px solid #aaa; font-size: 11px; height: 29px; line-height: 30px; width: 111px; text-align: center; cursor: pointer; text-shadow: 0 1px 0 #fff; border-radius: 4px 4px 0 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); background: #ddd; background: -moz-linear-gradient(top, #eee, #ddd); background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd)); } .tabPanel .hit { border-bottom: 1px solid #fff; cursor: pointer; color: black; text-shadow: 0 1px 0 #fff; background: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#fff)); background: -moz-linear-gradient(top, #e1e1e1, #fff); } .pane { border: 1px solid #aaa; border-top: 0; min-height: 100px; background-color: #fff; display: none; } .pane p { padding: 15px 15px 0 10px; } .pane h4 { padding: 15px 15px 0 10px; font-size: 14px; font-weight: bold; }
本文作者: Jasmine
本文链接: https://www.jianbaizhan.com/article/400
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!