关于JavaScript 实现TAB切换特效的一种方法

采用css中display属性none隐藏标签的方法来实现:

使用JavaScript函数代码判断onmouseover事件调用函数传过来的值,

然后通过DOM操作改变他的display属性值为block,达到显示的目的;

点击下面的链接看效果

点我

js部分代码如下:

其中pid来接收调用函数时传过来的值;

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>