浅谈JavaScript（一）补充例子：面向对象 Tab 栏切换

最新推荐文章于 2024-06-10 21:57:03 发布

Grit_Crab

最新推荐文章于 2024-06-10 21:57:03 发布

阅读量202

点赞数

分类专栏：浅谈JavaScript 文章标签： javascript css html html5 css3

本文链接：https://blog.csdn.net/m0_46166985/article/details/105284468

版权

具体代码：

链接:https://pan.baidu.com/s/1uY25FCHY7MnOyt3VfIlpag 密码:q1ug

功能需求：

点击 tab 栏，可以切换效果
点击 + 号，可以添加tab栏和内容项
点击 x 号，可以删除当前tab项和内容项
双击 tab 项文字或者内容项文字，可以修改里面的文字内容

功能实现思路：

1. 该对象具有切换功能

2. 该对象具有添加功能

创建新的选项卡 li 和新的内容 section

以前做法：动态创建元素 createElement ，但是元素里面内容较多，需要 innerHTML 赋值在 appendChild 追加到父元素里面，appendChild 不支持追加字符串的元素

现在高级做法：利用 Element.insertAdjacentHTML() 可以直接把字符串格式元素添加到父元素中，Element.insertAdjacentHTML() 支持追加字符串的元素
把创建的两个元素追加到对应的父元素中
该对象具有删除功能
1. 点击 x 可以删除当前的选项卡和当前的 section
2. x 号是没有索引的，但是它的父亲的索引号正是我们想要的索引号
3. 核心思路：点击x号可以删除这个索引号对应的li 和section
该对象具有修改功能
1. 双击选项卡 li 或者 section 里面的文字，可以实现修改功能
2. 双击事件是：ondblclick
3. 如果双击文字，会默认选定文字，此时需要双击禁止选中文字
4. 双击禁止选定文字，不需要背

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

核心思路：双击文字的时候，在里面生成一个文本框，当失去焦点或者按下回车后然后把文本框输入的值给原先元素即可

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>面向对象 Tab</title>
    <link rel="stylesheet" href="./styles/tab.css">
    <link rel="stylesheet" href="./styles/style.css">
</head>

<body>

    <main>
        <h4>
            Js 面向对象 动态添加标签页
        </h4>
        <div class="tabsbox" id="tab">
            <!-- tab 标签 -->
            <nav class="firstnav">
                <ul>
                    <li class="liactive">

最低0.47元/天解锁文章

Grit_Crab

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈JavaScript（一）补充例子：面向对象 Tab 栏切换

具体代码：链接:https://pan.baidu.com/s/1uY25FCHY7MnOyt3VfIlpag 密码:q1ug功能需求：点击 tab 栏，可以切换效果点击 + 号，可以添加tab栏和内容项点击 x 号，可以删除当前tab项和内容项双击 tab 项文字或者内容项文字，可以修改里面的文字内容功能实现思路：1. 该对象具有切换功能2. 该对象具有添加功能创建...
复制链接

扫一扫