实现点击切换的标签选项卡

发布于 2023-03-06 22:10:09 字数 3813 浏览 105 评论 0

案例分析

首先，实现了最基本的功能：点击不同的按钮切换显示不同的内容；
其次，加了定时器，用的是 setInterval，当然用 setTimeout 也是可以的；
最后，给 body 绑定了onmouseover 和 onmouseout 事件，鼠标移入清除定时器，移出又添加定时器。

实现过程

编写网页的内容和样式

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>点击切换选项卡代码</title>
</head>
<body>
<div>
    <div>
        <ul>
            <li onclick="setTab('one',1)">首页</li>
            <li onclick="setTab('one',2)">点击看看</li>
            <li onclick="setTab('one',3)">会自动的</li>
            <li onclick="setTab('one',4)">我的网站</li>
        </ul>
    </div>
    <div>
        <div>我的网站</div>
        <div>JS代码,导航菜单</div>
        <div>看到效果了吗？？？</div>
        <div>我的网站我做主</div>
    </div>
</div>
<div></div>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
a, img {
    border: 0;
}
body {
    font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
.tab1 {
    width: 401px;
    border-top: #cccccc solid 1px;
    border-bottom: #cccccc solid 1px;
    margin: 50px auto 0 auto;
}
.menu {
    height: 28px;
    border-right: #cccccc solid 1px;
}
.menu li {
    float: left;
    width: 99px;
    text-align: center;
    line-height: 28px;
    height: 28px;
    cursor: pointer;
    border-left: #cccccc solid 1px;
    color: #666;
    font-size: 14px;
    overflow: hidden;
    background: #E0E2EB;
}
.menu li.off {
    background: #FFFFFF;
    color: #336699;
    font-weight: bold;
}
.menudiv {
    height: 200px;
    border-left: #ccc solid 1px;
    border-right: #ccc solid 1px;
    border-top: 0;
    background: #fefefe
}
.menudiv div {
    padding: 15px;
    line-height: 28px;
}

因为都是很基础的，我就主要讲解一下JS部分，后面的案例也一样，请理解。

实现特效

var name_0='one';
var cursel_0=1;
var ScrollTime=3000;//循环周期（毫秒）
var links_len,iIntervalId;
window.onload=function(){
    var links = document.getElementById("tab1").getElementsByTagName('li')
    links_len=links.length;
    for(var i=0; i<links_len; i++){
        links[i].onmouseover=function(){
            clearInterval(iIntervalId);
            this.onmouseout=function(){
                iIntervalId = setInterval(Next,ScrollTime);;
            }
        }
    }
    document.getElementById("con_"+name_0+"_"+links_len).parentNode.onmouseover=function(){
        clearInterval(iIntervalId);
        this.onmouseout=function(){
            iIntervalId = setInterval(Next,ScrollTime);;
        }
    }
    setTab(name_0,cursel_0);
    iIntervalId = setInterval(Next,ScrollTime);
}
function setTab(name,cursel){
    cursel_0=cursel;
    for(var i=1; i<=links_len; i++){
        var menu = document.getElementById(name+i);
        var menudiv = document.getElementById("con_"+name+"_"+i);
        if(i==cursel){
            menu.className="off";
            menudiv.style.display="block";
        }
        else{
            menu.className="";
            menudiv.style.display="none";
        }
    }
}
function Next(){
    cursel_0++;
    if (cursel_0>links_len)cursel_0=1
    setTab(name_0,cursel_0);
}

注意

onload 事件会在页面或图像加载完成后立即发生，类似与 jQuery 中的 ready 事件，推荐都加上，或者也可以使用立即执行函数，这就看个人喜欢；变量最好是在最开始的时候就声明，因为使用 var 声明的变量会发生声明提前，即使你在变量声明之前调用也不会报错；但是在 es6 中的 let 就很好的纠正了这一现象，所以我建议大家要养成一个好的习惯，先声明，在调用；

在线查看：https://www.wenjiangs.com/runcode/mBD0OX2Y

分享到QQ

分享到微博