简单的选项卡切换代码

作者:Jasmine - 2016年05月04日

选项卡效果展示:

该效果用到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 许可协议。转载请注明出处!


 请勿发布不友善或者负能量的内容。审查将对发布广告等违规信息进行处罚!