登录
    如果您想得到任何关于IT方面的所有资料,联系bo主,即可免费获得。

利用JavaScript来实现页面选项卡的功能以及代码

趣知识 佛我没那你们佛 313次浏览 0个评论 扫描二维码

 

选项卡

如图所示,稍微好一点的网站都会用到选项卡这个特效,那么这个特效是怎么实现的呢,其实非常简单,那么鸭哥今天就分享一下选项卡的源码

<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<title>55555</title>
<style>
#div1 .active{background:yellow;}
#div1 div{width:200px;height:200px;background:red;border:2px solid red;display:none;}
</style>
<script>
window.onload=function()
{
    var odiv=document.getElementById(‘div1’);//odiv等于div1的元素
    var abtn=odiv.getElementsByTagName(‘input’);//abtn等于input
    var adiv=odiv.getElementsByTagName(‘div’);//adiv等于div下的div
    
    
    for(var i=0;i<abtn.length;i++)
    {    abtn[i].index=i;
        abtn[i].onmouseover=function  ()
        {    
            for(var i=0;i<abtn.length;i++)
            {
                
                abtn[i].className=”;
                adiv[i].style.display=’none’;
            }
            this.className=’active’;
            adiv[this.index].style.display=’block’;
        };
            
    };
};
</script>
</head>
<body>
<div id=”div1″>
    <input class=”active”  type=”button” value=”教育” />
    <input type=”button” value=”培训” />
    <input type=”button” value=”招生” />
    <input type=”button” value=”出国” />
    <div style=”display:block;”>111</div>
    <div>2222</div>
    <div>3333</div>
    <div>4444</div>
</div>
</body>
</html>

将代码复制到后缀为html的文件选项卡就可以使用了,后面的几个div是用来放当前选项卡的内容的。

JavaScript象牙白宣布国家=图为实现后的效果


转载请注明文章来源于:成都seo----加上本文链接

万分感谢

如果你喜欢我们的文章不防关注我们的微信公众号ruichuangwangluo
喜欢 (1)分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
成都seo网站地图