JS基础之DOM节点和网页元素基本操作练习（侧边栏菜单，滚动菜单，tab选项卡，背景切换）

于 2023-02-08 20:08:33 发布
阅读量311 收藏 2
点赞数
分类专栏： JavaScript 文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZQsSpace/article/details/128932584
版权

练习1：侧边栏菜单

  效果图：

 

  code：

<!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>侧边栏菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        aside{
            width: 200px;
            background-color: #cacaca;
            color: #ffffff;
        }
        aside>ul>li{
            height: 40px;
            border-bottom: 1px solid #ffffff;
            text-align: center;
            overflow: hidden;
            user-select: none;
            transition: all 0.3s linear;
        }

        aside>ul>li>p{
            height: 40px;
            width: 100%;
            background-color: #000000;
            line-height: 40px;
        }

        .ndMenu li{
            height: 30px;
            line-height: 30px;
            width: 100%;
            background-color: #cacaca;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <aside>
        <ul>
            <li>
                <p>菜单1</p>
                <ul class="ndMenu">
                    <li>菜单1-1</li>
                    <li>菜单1-2</li>
                </ul>
            </li>
            <li>
                <p>菜单2</p>
                <ul class="ndMenu">
                    <li>菜单2-1</li>
                    <li>菜单2-2</li>
                </ul>
            </li>
            <li>
                <p>菜单3</p>
                <ul class="ndMenu">
                    <li>菜单3-1</li>
                    <li>菜单3-2</li>
                </ul>
            </li>
            <li><p>菜单4</p></li>
        </ul>
    </aside>

    <script>
        let stMenu = document.querySelectorAll("aside>ul>li>p");

        stMenu.forEach(x=>{
            x.onclick=function(){
                if(hasNextE(this)){
                    // 获取点击的p标签所在的li标签
                    let high = this.parentElement;
                    if(high.style.height == "" || high.style.height == "40px"){
                        // 每次展开2级菜单时，关闭其他菜单
                        closeAllStMenu();
                        // 获取2级菜单个数，计算2级菜单总高度
                        let subHigh = high.lastElementChild.children.length * 30;
                        // 修改1级菜单高度
                        high.style.height = 40+subHigh+"px";
                    }else{
                        high.style.height = "40px";
                    }
                }
                    
                
            }
        });

        // 判断当前元素是否有下一个兄弟元素
        function hasNextE(e){
            if(e.nextElementSibling == null){
                return false;
            }
            return true;
        }

        // 关闭所有一级菜单
        function closeAllStMenu(){
            stMenu.forEach(y=>{
                y.parentNode.style.height = "40px";
            });
        }

    </script>
</body>
</html>

练习2：滚动菜单

  效果图：

 

  code：

<!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>
    <link rel="stylesheet" href="./iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            width: 100%;
            height: 100%;
            background-color: #2D2C41;
        }
        #main{
            margin: 0 auto;
            width: 360px;
            background-color: #cacaca;
            color: #000000;
            border-radius: 4px;
            overflow: hidden;
        }
        #main>ul>li{
            height: 40px;
            border-bottom: 1px solid #cacaca;
            text-align: left;
            overflow: hidden;
            user-select: none;
            transition: all 0.3s linear;
        }

        #main>ul>li>div{
            height: 40px;
            width: 100%;
            background-color: #ffffff;
            line-height: 40px;
            box-sizing: border-box;
            padding-left: 20px;
            position: relative;
            transition: all 0.2s linear;
        }

        .ndMenu li{
            height: 40px;
            line-height: 40px;
            width: 100%;
            color: #ffffff;
            background-color: #444359;
            cursor: pointer;
            box-sizing: border-box;
            padding-left: 20px;
            border-bottom: 1px solid #ffffff30;
            transition: all 0.3s linear;
        }

        .ndMenu li:hover{
            background-color: #B63B4D;
        }

        .arrow{
            position: absolute;
            display: inline-block;
            right: 20px;
            transition: all 0.3s linear;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="main">
        <ul>
            <li>
                <div><span class="iconfont icon-time"></span>菜单1<span class="arrow">∨</span></div>
                <ul class="ndMenu">
                    <li>菜单1-1</li>
                    <li>菜单1-2</li>
                </ul>
            </li>
            <li>
                <div><span class="iconfont icon-setting"></span>菜单2<span class="arrow">∨</span></div>
                <ul class="ndMenu">
                    <li>菜单2-1</li>
                    <li>菜单2-2</li>
                </ul>
            </li>
            <li>
                <div><span class="iconfont icon-codepen"></span>菜单3<span class="arrow">∨</span></div>
                <ul class="ndMenu">
                    <li>菜单3-1</li>
                    <li>菜单3-2</li>
                </ul>
            </li>
            <li>
                <div><span class="iconfont icon-feed"></span>菜单4<span class="arrow">∨</span></div>
                <ul class="ndMenu">
                    <li>菜单4-1</li>
                    <li>菜单4-2</li>
                </ul>
            </li>
        </ul>
    </div>

    <script>
        let stMenu = document.querySelectorAll("#main>ul>li>div");

        stMenu.forEach(x=>{
            x.onclick=function(){
                if(hasNextE(this)){
                    // 获取点击的p标签所在的li标签
                    let high = this.parentElement;
                    if(high.style.height == "" || high.style.height == "40px"){
                        // 每次展开2级菜单时，关闭其他菜单
                        closeAllStMenu();
                        
                        // 获取2级菜单个数，计算2级菜单总高度
                        let subHigh = high.lastElementChild.children.length * 40;
                        
                        // 修改1级菜单高度、颜色、箭头旋转角度
                        high.style.height = 40+subHigh+"px";
                        this.style.color = "#B63B4D";
                        this.lastElementChild.style.transform = "rotate(180deg)";
                    }else{
                        high.style.height = "40px";
                        this.style.color = "#000000";
                        this.lastElementChild.style.transform = "rotate(0deg)";
                    }
                }
                    
                
            }
        });

        // 判断当前元素是否有下一个兄弟元素
        function hasNextE(e){
            if(e.nextElementSibling == null){
                return false;
            }
            return true;
        }

        // 关闭所有一级菜单
        function closeAllStMenu(){
            stMenu.forEach(y=>{
                y.parentNode.style.height = "40px";
                y.style.color = "#000000";
                y.lastElementChild.style.transform = "rotate(0deg)";
            });
        }

    </script>
</body>
</html>

练习3：Tab选项卡

  效果图：

  code：

<!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>Tab选项卡效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            background-color: #484B5F;
        }
        h1{
            margin: 30px 0 10px;
            text-align: center;
            color: #dadada;
        }
        section{
            padding: 40px 0;
            width: 100%;
            margin: 0 auto;
            background-color: #ffffff;
            overflow: hidden;
        }
        section li{
            color: #8C8C8C;
            height: 30px;
            line-height: 30px;
            display: inline-block;
            background-color: #EDEDED;
            padding: 0 15px;
            border-radius: 12px 12px 0 0;
            cursor: pointer;
            transition: all 0.3s linear;
        }
        #tag{
            height: 50px;
            position: relative;
        }
        #tag>ul{
            position: absolute;
            bottom: 0;
            left: 0;
        }
        #tag,#content{
            width: 900px;
            margin: 0 auto;
        }
        #content{
            box-sizing: border-box;
            border: 1px solid #cacaca;
            padding: 10px 15px;
        }
        #content h3{
            line-height: 36px;
        }
        #content p{
            color: #8C8C8C;
        }

        .textdisplay{
            animation: textdisplay 0.3s linear;
        }

        /* 自定义动画，透明度从0到1 */
        @keyframes textdisplay {
            0%{
                opacity: 0;
            }
            100%{
                opacity: 1;
            }
        }
    </style>

    <script>
        var data = [
            {
                "title":"Content 1",
                "content":"Aliquam eleifend magna mauris, id egestas eros dictum ac. Vivamus ac turpis at nisi mattis aliquam. In hac habitasse platea dictumst."
            },
            {
                "title":"Content 2",
                "content":"Donec congue ligula non risus dictum, eget vehicula diam mattis. Pellentesque at ante ipsum. Suspendisse rutrum elementum dolor, non congue risus sagittis id."
            },
            {
                "title":"Content 3",
                "content":"Vivamus sem odio, mattis vel dui aliquet, iaculis lacinia nibh. Vestibulum tincidunt, lacus vel semper pretium, nulla sapien blandit massa, et tempor turpis urna eu mi."
            },
            {
                "title":"Content 4",
                "content":"Donec congue ligula non risus dictum, eget vehicula diam mattis. Pellentesque at ante ipsum. Suspendisse rutrum elementum dolor, non congue risus sagittis id."
            },
            {
                "title":"Content 5",
                "content":"Donec congue ligula non risus dictum, eget vehicula diam mattis. Pellentesque at ante ipsum. Suspendisse rutrum elementum dolor, non congue risus sagittis id."
            }
        ];
    </script>
</head>
<body>
    <h1>Tab选项卡</h1>
    <section>
        <div id="tag">
            <ul>
                <li>Long Tab Name</li>
                <li>Another Tab</li>
                <li>Tab3</li>
                <li>Tab4</li>
                <li>Tab5</li>
            </ul>
        </div>
        <div id="content">
            <h3>标题</h3>
            <p>内容</p>
        </div>
    </section>
    <script>
        let tags = document.querySelectorAll("#tag li");
        let titles = document.querySelector("#content>h3");
        let cont = document.querySelector("#content>p");

        // 加载时默认选中第一个tag
        changeStyle(tags[0], 0);

        tags.forEach((x,index)=>{
            x.onclick = function(){
                tagOrign();
                changeStyle(x, index);
            }
        });

        // 初始化选项样式
        function tagOrign(){
            tags.forEach(x=>{
                x.style.borderTop = "none";
                x.style.color = "#8C8C8C";
                x.style.backgroundColor = "#EDEDED";
            });
        }

        // 更改标签样式和文本内容
        function changeStyle(x, index){
            titles.innerText = data[index].title;
            cont.innerText = data[index].content;
            
            // 给文本添加含有动画的类
            titles.classList.add("textdisplay");
            cont.classList.add("textdisplay");
            
            // 通过增加上边框实现类似高度增加效果
            x.style.borderTop = "5px solid #68AD8F";
            x.style.color = "#ffffff";
            x.style.backgroundColor = "#68AD8F";

            // 定时删除动画类，以便每次点击都能有动画？
            setTimeout(() => {
                titles.classList.remove("textdisplay");
                cont.classList.remove("textdisplay");
            }, 300);
        }

    </script>
</body>
</html>

练习4：背景图切换

  效果图：

 

  code：

<!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>
    <link rel="stylesheet" href="../练习2/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            background-color: #DD5F03;
            width: 100%;
            height: 300px;
        }
        #banner{
            width: 812px;
            height: 100%;
            margin: 0 auto;
            box-sizing: border-box;
            /* border: 1px dashed pink; */
            position: relative;
            background-repeat: no-repeat;
            background-size:contain;
            transition: all 0.3s linear;
        }
        .btnSmt{
            position: absolute;
            right: 0;
            bottom: 100px;
            width: 120px;
            height: 30px;
            border-radius: 15px;
            background-color: #ffffff;
            color: #DD5F03;
            border: 2px solid #cacaca;
        }
        #nav{
            position: absolute;
            left: 0;
            bottom: 0;
            display: flex;
            width: 100%;
            height: 70px;
            justify-content: space-evenly;
            align-items: flex-end;
        }
        #nav>li{
            width: 160px;
            height: 60px;
            background-color: #ffffff50;
            list-style: none;
            cursor: pointer;
            text-align: center;
            line-height: 60px;
            transition: all 0.3s linear;
        }
    </style>
</head>
<body>
    <header>
        <div id="banner">

            <button class="btnSmt">投放申请</button>

            <ul id="nav">
                <li><span class="iconfont icon-time"></span>大数据分析</li>
                <li><span class="iconfont icon-time"></span>媒体资源</li>
                <li><span class="iconfont icon-time"></span>精准营销</li>
                <li><span class="iconfont icon-time"></span>跨屏</li>
                <li><span class="iconfont icon-time"></span>监测与优化</li>
            </ul>
        </div>
    </header>
    <script>
        let banner = document.querySelector("#banner");
        let li = document.querySelectorAll("#nav>li");
        // 定义图片共同部分路径
        let imgUrl = "./images/index_slide_con0";

        // 加载时默认选中样式
        // banner.style.backgroundImage = `url('${imgUrl}${1}.png')`;
        // li[0].style.height = "70px";

        li.forEach((e,index)=>{
            e.onclick=function(){
                highOrign();
                // 更改背景图片路径                  拼接为完整的图片路径
                banner.style.backgroundImage = `url('${imgUrl}${index+1}.png')`;
                e.style.height = "70px";
                e.style.lineHeight = "70px";

                // 也可通过换类的方式改变样式
            }
        });
        // 模拟用户点击，加载时选中第一个li
        li[0].click();

        function highOrign(){
            li.forEach((e,index)=>{
                e.style.height = "60px";
                e.style.lineHeight = "60px";

                // 也可通过换类的方式改变样式
            });
        }
    </script>
</body>
</html>

新手上路，如有错误，望大佬们指正。

ZQsSpace
关注
专栏目录
JS实现侧边选项卡功能
程序员小陈的博客
07-17 1103
**一、简述：**通过JS实现简单的选项卡功能，本示例是左右布局，要实现上下布局只需更改样式即可。 **二、功能介绍：**页面初始第一个选项——此示例为“第一天”为选中状态，对应右侧的内容——“学习HTML基础”，当鼠标点击第二个选项——此处为“第二天”，右侧出现对应内容——“学习CSS基础”……以此类推，实现点击左侧选项右侧出现相应内容。 ** 功能实现图 ** （后边依次类推） 页面内容编写——HTML <!DOCTYPE html> <html> <head&gt
HTML5和CSS3 WEB技术开发
最新发布
张晨光老师的播客
01-02 6583
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
JS侧边栏菜单_手风琴特效
06-16
JS侧边栏菜单，手风琴特效，平滑切换，适合边栏菜单的制作
标签在左侧的JS选项卡
weixin_34242819的博客
04-24 361
这个JS选项卡带有一个固定标题，标签在左侧，内容在右侧，鼠标放到相应标签显示对应内容。比较简单的一个JS选项卡。 下载地址：标签在左侧的JS选项卡 更多代码请访问JS代码站，JS代码频道 转载于:https://blog.51cto.com/3285518/1185622...
js侧边栏导航菜单.zip
11-29
js侧边栏导航菜单，用css和JavaScript制作的简单网页界面，用法简单，通俗易懂，点击下载即可
js侧边栏菜单插件canvi
12-11
canvi.js是一款js侧边栏菜单插件。canvi.js使用简单，可以快速的制作出侧边栏展开收缩js特效。你可以在同一个页面实例化多个侧边栏实例，还可以设置侧边栏的响应式宽度，自定义侧边栏样式等。
【VUE】看完这篇文章能够了解es6特性和vue基础
嗨Sirius
12-13 2325
Vue讲解 1.Vue.js特性简介 什么是Vue.js Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 Vue.js是一个渐进式框架，什么是渐进式？ 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。 如果你希望将更多的业务逻辑适用Vue实现，那么Vue有成熟，稳定的核心库和生态系统。 Core+Vue-router+Vuex可以满足你各种各
JavaScript
pengjianglilive的专栏
08-02 921
为什么学习 JavaScript? JavaScript 是 web 开发人员必须学习的 3 门语言中的一门： HTML定义了网页的内容 CSS描述了网页的布局 JavaScript控制了网页的行为 阅读本教程前，您需要了解的知识： 阅读本教程，您需要有以下基础： HTML 教程 CSS 教程 JavaScript简介 JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 ...
[深入浅出Ext.JS.徐会生&何启伟&康爱媛)第7——13章.pdf
04-19
- **Tab Panel**：提供选项卡式的界面布局，每个选项卡可以包含不同的内容。 - **Docked Items**：用于固定位置的组件，如顶部导航栏、侧边栏等。 - **Splitter**：允许用户通过拖动分割条来调整组件大小。 #### ...
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
fwdwqdwq的博客
03-07 3001
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
基于JS实现简单的样式切换效果代码
10-23
主要介绍了基于JS实现简单的样式切换效果代码,涉及简单的javascript控制页面元素样式变换的技巧,非常简单实用,需要的朋友可以参考下
JavaScript实现的多功能侧边导航菜单源码
mazai5080的博客
04-23 2150
大家好，今天给大家介绍一款，JavaScript实现的多功能侧边导航菜单源码（图1）。送给大家哦，获取方式在本文末尾。 图1 可以菜单在左边弹出，也可以设置菜单在右边弹出（图2） 图2 图2 可以设置为子菜单重叠样式（图3） 图3 可以设置为扩展样式（图4） 图4 可以设置为直接展开样式（图5） 图5 本模板编码：10138，需要的朋友，关注文末公众号，搜索10138，即可获取。 <!DOCTYPE html> <html lang="zh
Tab选项卡 - 页面元素
weixin_44543412的博客
07-05 1305
Tab选项卡 - 页面元素 开发工具与关键技术：Visual Studio 前端 作者：盘子 撰写时间：2019年07月05 日 导航菜单可以应用于头部和页面侧边，简约又美观。所以今天来对相关的内容--Tab选项卡做一个学习的小总结。Tab选项卡是一种支持响应式、支持对Tab外部进行新增、删除、切换等功能的页面元素。结构简单，支持自定义分隔符。一般默认Tab选项卡，Tab广泛应用于Web...
点击左侧菜单栏生成选项卡js代码
qq_39102113的博客
07-25 2237
js 代码部分 /*创建iframe*/ function creatIframe(href,titleName){     var topWindow=$(window.parent.document),         show_nav=topWindow.find('#min_title_list'),//选项卡ul标签id         iframe_box=topWindow.fin...
侧栏选项卡 闭包处理 原生js处理兄弟元素
weixin_33894992的博客
03-23 130
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; ...
JS实现选项卡效果
热门推荐
liujian573281的博客
01-16 1万+
选项卡这个效果估计以后的项目会经常涉及到，对代码还是半熟练的情况下还是写下来吧。 先来布局一个简单的页面：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;pa
JavaScript实战篇： 选项卡功能
RQ桑的博客
04-06 1259
JavaScript实战篇 选项卡功能
html ul li做左侧菜单,用ul、li标签创建css横向导航菜单示例
weixin_30575925的博客
05-30 1831
创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里，这种方法看起来很合理也很直观。但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白。所以，为了避免所有的链接都挤在一起，你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔，让这些文字分离开来，不至于混在一起。现在我们正常的做法是应用ul、li标签把链接作为无序列表(unordered list)...
js侧边滑动切换右侧内容js特效
ICode联盟
08-21 309
js侧边滑动切换右侧内容特效，左侧tab选项卡滚动切换，右侧内容区域变化，一款简单创意的tab选项卡切换代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值