js中选项卡的简单实现1

最新推荐文章于 2024-01-24 12:19:34 发布

lee_xudong

最新推荐文章于 2024-01-24 12:19:34 发布

阅读量210

点赞数 1

分类专栏： js 文章标签： php javascript 前端

本文链接：https://blog.csdn.net/lee_xudong/article/details/53078820

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    *{margin:0;padding:0}
    div{width:300px;height:300px;border:1px solid red;background:tomato;font-size:50px;font-weight:bold;
    line-height:300px;text-align:center;display:none;}
    input{width:66px;height:30px;background:#ccc;font-weight:bold;}
    .show{display:block;}
    .active{width:80px;background:#f90;}
</style>
<script>
window.onload = function ()
{
    //先获取按钮
    var aBtn = document.getElementsByTagName('input');
    //在过去div    
    var aDiv = document.getElementsByTagName('div');

    for (var i=0;i<aBtn.length;i++) {
        //为了给div创建关联条件自己定义了一行间的属性
        aBtn[i].index = i;
        aBtn[i].onclick = function ()
        {
            //先清空按钮的class名字
            for (var i=0;i<aBtn.length;i++) {
                aBtn[i].className = '';
                aDiv[i].className = '';
            }
            //给当前你点击的那个按钮加上class
            this.className = 'active';
            var index = this.index;
            aDiv[index].className = 'show';

        }
    }
}
</script>
</head>

<body>
    <input type="button" value="中国" class="active" />
    <input type="button" value="美国" />
    <input type="button" value="韩国" />
    <input type="button" value="日本" />

    <div class="show">北京</div>
    <div>华盛顿</div>
    <div>首尔</div>
    <div>东京</div>
</body>
</html>

lee_xudong

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中选项卡的简单实现1

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style> *{margin:0;padding:0} div{width:300px;height:300px;border:1px solid red;background:tomato;font-size:50px;font-w
复制链接

扫一扫