面向对象选项卡的两种写法

最新推荐文章于 2023-09-26 16:30:56 发布
最新推荐文章于 2023-09-26 16:30:56 发布
阅读量141 收藏
点赞数
文章标签： html5 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LVHA529/article/details/118735217
版权
本文探讨了使用HTML5和JavaScript两种不同的方法来创建面向对象的选项卡组件。第一种方法利用HTML结构和CSS样式实现静态切换，而第二种方法通过JavaScript动态控制选项卡的显示与隐藏，增强了交互性。这两种实现方式各有优势，适用于不同场景的需求。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ol,ul li{
            list-style: none;
        }
        .box{
            width: 500px;
            height: 500px;
            border: 1px solid black;
            margin: 0 auto;
        }
        ol{
            width: 100%;
            height: 100px;
            background-color:orangered;
            display: flex;
            justify-content: space-around;
        }
        ol li{
            text-align: center;
            line-height: 100px;
            flex: 1;
            cursor: pointer;
        }
        ul{
最低0.47元/天 解锁文章
弯道超车的小破车
关注
归纳下js面向对象的几种常见写法总结
10-21
第三种常见的面向对象写法是使用对象字面量，这是一种简单的对象创建方法，适用于快速创建具有固定属性和方法的对象实例。它的局限性在于，一旦对象创建，它的方法和属性就不能被修改。使用对象字面量和原型方式结合...
document.querySelector()选择器的用法
qq_36465515的博客
12-10 3712
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="myId"></div> <div class="myClass"></div> </body> <script type="text/javascript"> var d
面向对象知识点分享
最新发布
qq_64926847的博客
09-26 49
【代码】面向对象知识点分享。
js以面向对象思想编写简单的选项卡案例
weixin_50630898的博客
06-10 77
在添加类名实现效果之前需要先清除所有元素的类名，从而确保只有一个元素被添加了act类名，如果不清除，每点击一项之前点击的元素样式不会消失。（li元素的排列方式是通过定位层叠在一起，并且全部隐藏，随后通过点击上方的导航将指定的li进行展示 ）2、这时的this.ele就是上面的获取到的母盒子，我们可以通过此获取上面的子元素，进而进行操作。而用let定义变量是因为let的块级作用域可以使每一个导航条的元素能被分别点击。（这是添加act后导航条样式的变化，以及让对应的展示区域显现）(直接丑哭我自己好吗)
JS学习笔记18-面向对象方式的选项卡
欢迎访问我的主页：https://www.bookbook.cc
05-19 8284
文章目录一、使用面向对象写一个选项卡1.1 先用面向过程写一个选项卡1.2 正式开始使用面向对象写一个选项卡1.2.1、解决函数嵌套1.2.2 pass掉window.onload1.2.3 把变量作为属性 函数变为方法 并且改错 、传参、闭包 一、使用面向对象写一个选项卡 1.1 先用面向过程写一个选项卡 在使用面向对象写一个选项卡的时候，我们还是先用面向过程来写一个选项卡，如下： <body> <div id="div1"> <input class
【JS】使用面向对象实现选项卡
点滴记忆
07-20 395
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...
选项卡改变为面向对象写法后，复用和增加方法.md
09-09
面向对象写的一个点击选项卡，复用这个面向对象写法，同时为不同的添加不一样的方法
js面向对象的写法
10-22
以下将详细介绍标题和描述中提到的四种常见的JavaScript面向对象写法以及`this`关键字的使用。 1. **工厂模式** 工厂模式是通过函数来创建对象，它不直接关联构造函数。在给定的例子中，`Circle`函数创建了一个新...
简单的选项卡改变为面向对象的写法的一点学习经验总结.md
09-09
写选项卡的时候，要改变为面向对象的写法，面向兑现的写法更容易扩展或者维护，这里是文章的Markdown文档，需要的可以下载浏览，如有错误，欢迎指出 谢谢
用js面向对象写的选项卡
wan845199324的博客
06-27 742
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; } #
用面向对象的方法写选项卡功能
miyacnn的专栏
11-23 699
了解了面向对象之后，那我们来写下选项卡，，， 面向对象的选项卡 原则     先写出普通的写法，然后改成面向对象写法          普通方法变型               尽量不要出现函数嵌套函数               可以有全局变量               把onload中不是赋值的语句放到单独函数中          改成面向对象              ...
面向对象写tab选项卡
萧萧的博客
05-25 537
如有不对的请大佬指教
ES6 使用面向对象实现选项卡
xcc_2269861428的博客
06-27 1785
选项卡样子&lt;html&gt; &lt;head&gt; &lt;title&gt;ES6面向对象&lt;/title&gt; &lt;style&gt; input.active{ background:red; } #first &gt; div { width:200px; height:200px; background:#ccc; display:none; }...
选项卡面向对象写法
jingtian678的博客
03-12 353
选项卡面向对象写法 #div1 .active{background: yellow;} #div1 div{height: 200px; width: 200px; background: #ccc; display: none;} //混合模式 window.onload=function() { new TabSwitch('div1'); }; function
javascript用面向对象写简单选项卡
weixin_36633980的博客
03-20 291
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> #div1 input{ width: 40px; height: 20px; border: 1px solid black;
以面向对象的方式写选项卡
luohui2017的博客
02-20 358
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;sty
面向对象写选项卡
FireBird_one的博客
05-24 955
/* window.onload = function () { var oDiv = document.getElementById("div1"); var aBtn = oDiv.getElementsByTagName("input"); var aDiv = oDiv.getElementsByTagName("div"); var i = 0;
用面向对象的方法实现选项卡切换
weixin_46379044的博客
04-11 382
// 面向对象的方法 // 创建一个对象,这个对象中有属性有方法 // 属性是需要操作的标签等 // 方法就是实现选项卡效果的程序 // 定义构造函数 // 参数:需要执行的tab切换的标签对象,是所有需要执行选项卡效果标签的父级 // 面向对象方法1,建立变量,存储this function SetTab1(ele){ // 先要单独,...
javascript 面向对象的两种写法
追梦程序员
01-28 153
在javascript 中JSON 用作对象的 序列化和反序列化非常重要 下面代码涉及到了对象的初始化,序列化和反序列化 直接上代码 var ss={"name":"存储","age":12,"mem":["2213",11,{"pp":"123"}]} var s1= JSON.stringify(ss) //console.log(s1) var sobj= JSON.parse(s1); //console.log(sobj) //es6 class temp{ constructor(o.
面向对象改造选项卡：实践与学习体会
本文档是一篇关于将传统的JavaScript选项卡控制方式转变为面向对象编程（Object-Oriented Programming, OOP）的实践经验和学习总结。作者分享了在实现类似谷歌所示的选项卡切换功能时，如何将基本的HTML、CSS和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值