js 选项卡制作

最新推荐文章于 2022-11-13 20:35:01 发布

JuanWY

最新推荐文章于 2022-11-13 20:35:01 发布

阅读量558

点赞数

分类专栏：学习笔记文章标签：选项卡 js

本文链接：https://blog.csdn.net/JuanWY/article/details/46970261

版权

本文档通过HTML、CSS和JavaScript展示了如何创建一个简单的选项卡切换效果。利用window.onload事件处理函数，为每个按钮添加点击事件监听器，当点击按钮时，移除所有按钮的激活样式并隐藏对应的内容，然后将当前点击的按钮设置为激活状态并显示其对应的内容。内容包括北京、上海和深圳的描述。

摘要由CSDN通过智能技术生成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>选项卡</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    #div1  .active{
        background: yellow;
    }
    #div1 div{
        width: 200px;
        height: 200px;
        background: gray;
        display: none;
    }
</style>
<script>
    window.οnlοad=function(){
        var odiv1 = document.getElementById('div1');
        var oinp = odiv1.getElementsByTagName('input');
        var odiv = odiv1.getElementsByTagName('div');
        for(var i=0;i<oinp.length;i++){
            oinp[i].index=i;                         //设置内容切换
            oinp[i].onclick =

最低0.47元/天解锁文章

JuanWY

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 选项卡制作

选项卡 #div1 .active{ background: yellow; } #div1 div{ width: 200px; height: 200px; background: gray; display: none; } window.onload=funct
复制链接

扫一扫