<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){$(".tag1").click(function(){$(this).addClass('active').siblings().removeClass('active');    //标签切换效果。给当前激活标签加 .active。给它的兄弟们移除 .active。var idx = $(this).index();                            //取索引值
        $('.tag-body .tag-item').eq(idx).addClass('active').siblings().removeClass('active');//控制下面的内容的显隐。
});
});
</script>
<style type="text/css">
ul,li{margin:0;padding:0;list-style:none;}
.tag-head .tag1{float:left;margin-right:4px;padding:5px 20px;background:#999;color:#fff;cursor:pointer;}
.tag-head .tag1.active{background:#f00;}.tag-body{clear:both;border-top:1px solid #000;width:500px;}
.tag-body .tag-item{display:none;height:400px;background:#f8f8f8;padding:10px;}
.tag-body .tag-item.active{display:block;}
</style>
<ul class="tag-head"><li class="tag1 active">标签1</li><li class="tag1">标签2</li><li class="tag1">标签3</li>
</ul>
<ul class="tag-body"><li class="tag-item active">面板1</li><li class="tag-item">面板2</li><li class="tag-item">面板3</li>
</ul>

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){$(".close").click(function(){$(this).parent().hide();    //找到弹层按钮的父元素，关闭。
    });
});
</script>
<style type="text/css">
.box{position:relative;border:1px solid #999;width:500px;height:400px;z-index:100;}
.box .close{position:absolute;top:0;right:0;font-size:30px;line-height:1;font-family:'Arial';padding:10px 20px;background:#000;color:#fff;cursor:pointer;}
</style>
<div class="box"><div class="close">X</div><p>弹窗关闭效果</p>
</div>