js面向对象封装案例----Tab栏切换

最新推荐文章于 2022-09-04 20:35:51 发布

啵雨的博客

最新推荐文章于 2022-09-04 20:35:51 发布

阅读量425

点赞数 1

分类专栏： # js对象理解（模式，继承及面向对象封装案例）

本文链接：https://blog.csdn.net/qq_25503949/article/details/106006798

版权

这篇博客介绍了如何使用JavaScript面向对象的思想来封装Tab栏切换功能，包括基本的排版和效果实现，以及如何将面向对象的代码改写为面向过程。文章详细展示了HTML、CSS和JS的实现步骤，并强调了在转换过程中对构造函数、this指向和方法分布的调整。

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

js面向对象封装案例 Tab栏切换

一.基本的排版和效果实现：
①.js和html部分：

<body>
    <ul id="header">
        <li class="active">节目1</li>
        <li>节目2</li>
    </ul>
    <div id="box1">
        <ul>
            <li>csjabfiabfuisavf</li>
            <li>csjabfiabfuisavf</li>
            <li>csjabfiabfuisavf</li>
            <li>csjabfiabfuisavf</li>
            <li>csjabfiabfuisavf</li>
        </ul>

    </div>
    <div id="box2">
        <ul>
            <li>15555555555315</li>
            <li>15555555555315</li>
            <li>15555555555315</li>
            <li>15555555555315</li>
            <li>15555555555315</li>
        </ul>

    </div>
    <script>
        var header = document.getElementById('header');
        var lis = header.getElementsByTagName('li');
        var odiv = document.getElementsByTagName('div');
        console.log(odiv);

        for (let i = 0; i < lis.length; i++) {
   
            lis[i].onmouseover = function()

最低0.47元/天解锁文章

啵雨的博客

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js面向对象封装案例----Tab栏切换

js面向对象封装案例（一）Tab栏切换一.基本的排版和效果实现：①.js和html部分：<body> <ul id="header"> <li class="active">节目1</li> <li>节目2</li> </ul> <div id="box1"> <ul> <li>csjab
复制链接

扫一扫

专栏目录