采用css中display属性none隐藏标签的方法来实现:
使用JavaScript函数代码判断onmouseover事件调用函数传过来的值,
然后通过DOM操作改变他的display属性值为block,达到显示的目的;
点击下面的链接看效果
js部分代码如下:
function tab(pid) {
var a=['mil','news','people','tech'];
for (var i=0,len=a.length;i<len;i++) {
if (pid==a[i]) {
document.getElementById(a[i]).style.display="block";
} else{
document.getElementById(a[i]).style.display="none";
}
}
}
html里body中的代码:
<ul>
<li onmouseover="tab('mil');">军事</li>
<li onmouseover="tab('news');">新闻</li>
<li onmouseover="tab('people');">人物</li>
<li onmouseover="tab('tech');">科技</li>
</ul>
<p id="mil">
军事频道
</p>
<p id="news">
新闻频道
</p>
<p id="people">
人物频道
</p>
<p id="tech">
科技频道
</p>
微信扫一扫，打赏作者吧～
