tab选项卡
<style type="text/css"> .tabBar { width: 100%; font-family: "Microsoft YaHei"; } .tabBar .hd ul { z-index: 5; position: relative; zoom: 1; } .tabBar .hd li { float: left; height: 24px; line-height: 24px; margin-top: 4px; padding: 0px 16px 0px 16px; margin-right: 5px; color: #333333; border: 1px solid #c8d1d5; border-bottom: 0px; cursor: pointer; } .tabBar .hd li.on { height: 27px; line-height: 32px; font-weight: bold; overflow: hidden; margin-top: 0px; position: relative; top: 1px; border-top: 2px solid #004ea2; background: #fff; } .tabBar .bd { border-top: 1px solid #C8D1D5; padding: 10px 40px 0 40px; } </style>
<div class="tabBar"> <div class="hd"> <ul> <li class="on">基本信息</li> <li>业务数据</li> </ul> </div> <div class="bd"> <iframe id="fm" scrolling="no" src="" style="" width="100%;" height="100px;" frameborder="0"></iframe> </div> </div>
$(".hd li").click(function() { $(this).siblings().removeClass("on"); $(this).attr("class", "on"); var url = ""; switch($(this).index()){ case 0: url = ""; break; case 1: url = ""; break; } $("#fm").attr("src",url); });