这里涉及CSS以及部分JavaScript代码。原理是通过onmouseover和onmouseout来触发一些改变显示隐藏的函数实现。
例如：
<style type="text/css">
.hide{ display:hidden;}
.show{ display:block;}
</style>
<ul>
<li id="tab1" class="ontab" onMouseOver="TabLink(1)"><a href="#" onClick="TabLink(1)">消息</a></li>
<li id="tab2" class="tab" onMouseOver="TabLink(2)"><a href="#" onClick="TabLink(2)">文章</a></li>
<li id="tab3" class="tab" onMouseOver="TabLink(3)"><a href="#" onClick="TabLink(3)">图片</a></li>
</ul>
<div id="card1">
消息内容
</div>
<div id="card2">
文章内容
</div>
<div id="card3">
图片内容
</div>
<script language="JavaScript" type="text/JavaScript">
//首页选项卡切换
function $ID(obj){return document.getElementById(obj);}
function TabLink(n){
for(var i=1;i<=3;i++){
$ID('tab'+i).className='tab';
$ID('card'+i).className='hide';
}
$ID('tab'+n).className='ontab';
$ID('card'+n).className='show';
}
</script>
详细请查看：http://jzt.gzhu.e.cn代码。
参考资料：http://www.liufu.org/ling
热心网友
回答时间：2022-06-18 00:07
