【原创】选项卡示例

<div class="gd_xingqing">
<ul class="gd_ul" id="title">
<li class="gd_li gd_li1">选项卡1</li>
<li class="gd_li">选项卡2</li>
<li class="gd_li">选项卡3</li>
</ul>

<div class="cont_sp" id="content">

<div class="cont_div" style="display:block;"><h2>暂未上传全景
内容</h2></div>
<div class="cont_div" style="display:none;"><h2>暂未填写店长手
记</h2></div>
<div class="cont_div" style="display:none;"><h2>暂缓开通
</h2></div>

</div>

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script type="text/javascript">
$('#title li').click(function(){
// 清空 标题的样式
$('#title li').css('background','#F2F2F2').css("border-top","1px solid #DDDDDD").css
("color","#000000");
// 让所有的内容都隐藏
$('#content .cont_div').css('display','none');
// 给当前点击的标题添加样式
$(this).css('background','white').css("border-top","1px solid #24b764").css
("color","#24b764");
// 相应内容显示 index() 是 索引号
$('#content .cont_div').eq($(this).index()).css('display','block');
});
</script>

转载于:https://www.cnblogs.com/apolloren/p/9190132.html