#div_tab #tab_title{ height: 25px; } #div_tab #tab_title ul{ list-style: none; background-color: #FFFFFF; height: 25px; } #div_tab #tab_title li{ float: left; height: 25px; line-height:25px; text-align: center; margin-right: 1px; } /*位选中tab按钮样式 *为浅一点的绿色 */ #div_tab #tab_title a{ text-decoration: none; color: #000000; display: block; width: auto; background: url(../../images/tabl_green.gif) no-repeat left; } #div_tab #tab_title a span{ display: block; background: url(../../images/tabr_green.gif) no-repeat right; padding: 0 15px 0 15px; } /*连接样式以及默认选中的tab样式 *为深一点的绿色 */ #div_tab #tab_title .tagc a:hover ,#div_tab #tab_title .select{ text-decoration: none; color: #ffffff; display: block; width: auto; background: url(../../images/tabl_dgreen.gif) no-repeat left; } #div_tab #tab_title .tagc a:hover span,#div_tab #tab_title .selectspan{ display: block; background: url(../../images/tabr_dgreen.gif) no-repeat right; padding: 0 15px 0px 15px; } /*标签内容层定义*/ #div_tab #tab_content { height:94%!important; height: 96%; margin:0px; padding:0px; } /*边框样式*/ .content_border { border:1px solid #91D65F; border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; } .hidecontent {display:none;} .frame_catapro{ width: 100%; height:982px !important; height: 855px; }
<script> /** *切换选框时候要改变的 *tag 标签样式 *content 内容样式 *proframe 放商品信息的frame的ID *参数说明: *tabid 标签的id *url 切换标签时候加载的url */ function switchTag(tabid,url) { var tab="tab"; var content="content"; var proframe="proframe"; for(i=1; i <3; i++)//因为只有两个所以这样写 还有别的写法!~ { if (i==tabid) { document.getElementById(tab+tabid).getElementsByTagName("a")[0].className="select"; document.getElementById(tab+tabid).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"; document.getElementById(content+tabid).className=""; document.getElementById(proframe+tabid).src=url; //这里用iframe模拟ajax }else{ document.getElementById("tab"+i).getElementsByTagName("a")[0].className=""; document.getElementById("tab"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className=""; document.getElementById("content"+i).className="hidecontent"; } } } </script>
<div id="div_tab">
<div id="tab_title">
<ul>
<li id="tab1" class="tagc">
<a href="#" οnclick="switchTag('1','<%=taburl1%>');this.blur();" class="select">
<span class="selectspan">所有商品</span></a></li>
<li id="tab2" class="tagc">
<a href="#" οnclick="switchTag('2','<%=taburl2%>');this.blur();">
<span>分类推荐</span></a></li>
<li id="tmore">
</li>
</ul>
</div>
<div id="tab_content" class="content_border">
<div id="content1">
<iframe name="proframe1" id="proframe1" class="frame_catapro"
src=""
scrolling="no" frameborder="0"></iframe>
</div>
<div id="content2" class=hidecontent>
<iframe name="proframe2" id="proframe2" class="frame_catapro" src=""
scrolling="no" frameborder="0"></iframe>
</div>
</div>
</div>
效果图: