IE6、IE7、FireFox下测试通过,
JS文件:
<SCRIPT language=Javascript>
function changea(srcObj,tid)
{
var tabList = srcObj.parentNode.getElementsByTagName("li");
if(srcObj.className=='b')return;
for(var i=0;i<tabList.length;i++){
if(tabList[i].className=='b')tabList[i].className='a';
document.getElementById("area"+(i+1)).style.display = 'none';
}
document.getElementById("area"+tid).style.display ='';
srcObj.className ='b';//TAB切换
return false;
}
</SCRIPT>
CSS文件:
.trade_detail_ti li{
width:100px;
height:30px;
text-align:center;
line-height:30px;
float:left;
margin:0 5px;
cursor: pointer;
font-weight:bold;
}
.trade_detail_ti .a {
background:#f5dfab;
color:#b80000;
}
.trade_detail_ti .b {
background:#a80000;
color:#fff;
}
HTML文件:
<ul class="trade_detail_ti">
<li class="b" onMouseMove="changea(this,'1')">详细信息</li>
<li class="a" onMouseMove="changea(this,'2')">联系方式</li>
</ul>
<div id="area1" style="display: block" class="trade_detail_box"><p>供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息</p></div>
<ul id="area2" style="display: none" class="trade_ul trade_link" >
<li><span>学院名称:</span>北京XX大学XX学院</li>
<li><span>联系人:</span>邹老师</li>
<li><span>电子邮件:</span>zxy1970@163.com </li>
<li><span>联系电话:</span> 62890000 </li>
<li><span>邮政编码:</span> 100076</li>
</ul>
JS文件:
<SCRIPT language=Javascript>
function changea(srcObj,tid)
{
var tabList = srcObj.parentNode.getElementsByTagName("li");
if(srcObj.className=='b')return;
for(var i=0;i<tabList.length;i++){
if(tabList[i].className=='b')tabList[i].className='a';
document.getElementById("area"+(i+1)).style.display = 'none';
}
document.getElementById("area"+tid).style.display ='';
srcObj.className ='b';//TAB切换
return false;
}
</SCRIPT>
CSS文件:
.trade_detail_ti li{
width:100px;
height:30px;
text-align:center;
line-height:30px;
float:left;
margin:0 5px;
cursor: pointer;
font-weight:bold;
}
.trade_detail_ti .a {
background:#f5dfab;
color:#b80000;
}
.trade_detail_ti .b {
background:#a80000;
color:#fff;
}
HTML文件:
<ul class="trade_detail_ti">
<li class="b" onMouseMove="changea(this,'1')">详细信息</li>
<li class="a" onMouseMove="changea(this,'2')">联系方式</li>
</ul>
<div id="area1" style="display: block" class="trade_detail_box"><p>供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息供求详细信息</p></div>
<ul id="area2" style="display: none" class="trade_ul trade_link" >
<li><span>学院名称:</span>北京XX大学XX学院</li>
<li><span>联系人:</span>邹老师</li>
<li><span>电子邮件:</span>zxy1970@163.com </li>
<li><span>联系电话:</span> 62890000 </li>
<li><span>邮政编码:</span> 100076</li>
</ul>
转载于:https://blog.51cto.com/xinyult/179483