javascript学习笔记---后台管理左侧菜单

最新推荐文章于 2020-10-26 17:16:17 发布
最新推荐文章于 2020-10-26 17:16:17 发布
阅读量195 收藏
点赞数
分类专栏： javascript学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34964399/article/details/79330990
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item .c1{
            height:35px;
            font-size:25px;
            line-height:35px;
            text-align:center;
            background-color:greenyellow;
        }
        .hidden{
            display:none;
        }
    </style>
</head>
<body>
    <div style="height:50px;"></div>
    <div style="width:300px;">
        <div class="item">
            <div id="i1" class="c1" οnclick="func('i1')">水果</div>
            <div>
                <li>苹果</li>
                <li>橘子</li>
                <li>哈密瓜</li>
            </div>
        </div>
        <div class="item">
            <div id="i2" class="c1" οnclick="func('i2')">粮食</div>
            <div class="hidden">
                <li>方便面</li>
                <li>火腿</li>
                <li>手抓饼</li>
            </div>
        </div>
        <div class="item">
            <div id="i3" class="c1" οnclick="func('i3')">日用品</div>
            <div class="hidden">
                <li>牙刷</li>
                <li>牙膏</li>
                <li>水瓶</li>
            </div>
        </div>
        <div class="item">
            <div id="i4" class="c1" οnclick="func('i4')">家具</div>
            <div class="hidden">
                <li>床</li>
                <li>柜子</li>
                <li>台灯</li>
            </div>
        </div>
        <div class="item">
            <div id="i5" class="c1" οnclick="func('i5')">健身器材</div>
            <div class="hidden">
                <li>杠铃</li>
                <li>哑铃</li>
                <li>拉力器</li>
            </div>
        </div>
    </div>
    <script>
        function func(nid){
            var current_header = document.getElementById(nid);
            var div_list = current_header.parentElement.parentElement.children;
            for(var i=0;i<div_list.length;i++){
                div_list[i].children[1].classList.add('hidden');
            }
            document.getElementById(nid).nextElementSibling.classList.remove('hidden'); //获取下一个标签
        }
    </script>
</body>
</html>



用this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item .c1{
            height:35px;
            font-size:25px;
            line-height:35px;
            text-align:center;
            background-color:greenyellow;
        }
        .hidden{
            display:none;
        }
    </style>
</head>
<body>
    <div style="height:50px;"></div>
    <div style="width:300px;">
        <div class="item">
            <div id="i1" class="c1" οnclick="func(this)">水果</div>
            <div>
                <li>苹果</li>
                <li>橘子</li>
                <li>哈密瓜</li>
            </div>
        </div>
        <div class="item">
            <div id="i2" class="c1" οnclick="func(this)">粮食</div>
            <div class="hidden">
                <li>方便面</li>
                <li>火腿</li>
                <li>手抓饼</li>
            </div>
        </div>
        <div class="item">
            <div id="i3" class="c1" οnclick="func(this)">日用品</div>
            <div class="hidden">
                <li>牙刷</li>
                <li>牙膏</li>
                <li>水瓶</li>
            </div>
        </div>
        <div class="item">
            <div id="i4" class="c1" οnclick="func(this)">家具</div>
            <div class="hidden">
                <li>床</li>
                <li>柜子</li>
                <li>台灯</li>
            </div>
        </div>
        <div class="item">
            <div id="i5" class="c1" οnclick="func(this)">健身器材</div>
            <div class="hidden">
                <li>杠铃</li>
                <li>哑铃</li>
                <li>拉力器</li>
            </div>
        </div>
    </div>
    <script>
        function func(ths){
            // 鼠标一点击那些div，func(this)中的this就会传到这里，这边的ths就是当前动作的标签
            var current_header = ths;
            var div_list = current_header.parentElement.parentElement.children;
            for(var i=0;i<div_list.length;i++){
                div_list[i].children[1].classList.add('hidden');
            }
            ths.nextElementSibling.classList.remove('hidden'); //获取下一个标签
        }
    </script>
</body>
</html>

xiaoa~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WEB前端-HTML-CSS-后台管理页面布局小例
The One
08-14 1万+
作为一个后台管理页面，不必太过复杂，一般只需要三部分： 1、上层标签块； 2、左侧菜单块； 3、中部内容显示块；今天简要给大家分享一个布局中的一个小case； 需求：要求上层标签块、左侧菜单快固定不动，滚动条只对中部显示块作用；其实很简单，就是利用absolute的底部定位 ”bottom：0“配合overflow：auto来实现的。 代码如下：<!DOCTYPE html> <html
javaScript：后台管理功能
happydream_C的博客
09-05 1119
HTML: <form method="post" action="${ROOT}/admin/appcontent/${method}.do?appContentId=${param.appContentId}&redirect=${param.redirect}" class="pageForm required-validate" onsubmit="return ch
js折叠菜单.后台左侧菜单（亲测经典）
07-05
js折叠菜单.后台左侧菜单 亲测可用。 经典的后台折叠菜单，类似Qq效果。 找了好久，绝对可用
js的后台管理系统
06-22
js的后台管理系统
基于uni-app的电影购票后台管理系统设计源码
04-09
本资源提供了一套基于uni-app的电影购票app的后台管理系统设计源码。该项目包含了97个Vue文件、56个JavaScript文件、22个PNG图像文件...系统实现了电影购票功能，适合需要开发电影购票后台管理系统的开发者学习和使用。
javascript学习笔记--数字格式类型
10-25
很多人也许只知道 123，123.456，0xff 之类的数字格式。其实 js 格式还有很多数字格式类型，比如 1., .1 这样的，也有 .1e2 这样的。
JavaScript-笔记.pdf
11-28
JavaScript-笔记.pdf
vue3使用element-plus搭建后台管理系统---菜单管理
07-01
在本项目中，我们主要探讨的是如何利用Vue3框架与Element-Plus库来构建一个后台管理系统，特别是关于菜单管理的部分。Vue3是Vue.js的最新版本，它带来了许多性能优化和开发体验提升的新特性，如Composition API、...
JavaScript学习笔记--常用的互动方法
10-20
本文对JavaScript中常用的互动方法进行实例分析介绍，图文并茂，有需要的朋友可以看下
JS后台菜单简易版（转）
frank1998819
07-11 181
&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;meta
常用的后台JS管理菜单
holoblog
06-10 284
&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;title&
vuejs 和 element 搭建的一个后台管理界面
weixin_30596023的博客
11-20 1072
介绍： 　　这是一个用vuejs2.0和element搭建的后台管理界面。 相关技术： 　　vuejs2.0：渐进式JavaScript框架，易用、灵活、高效，似乎任何规模的应用都适用。 　　element：基于vuejs2.0的ui组件库。 　　vue-router：一般单页面应用spa都要用到的前端路由。 　　vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管...
js操作cookie实现后台管理系统全站样式切换
前端小渣渣
11-23 1725
js操作cookie实现后台管理系统整体样式的切换 包括子页面。完美兼容IE
点击左侧菜单在右侧弹出相应的内容
热门推荐
cly153239的专栏
04-21 1万+
一般我们在写后台界面时，往往需要一个主页，在那主页中我们需要进行左右分栏，在左边做一个菜单栏，右边则为一个内容栏。当点击左侧时在右侧弹出相应的内容。 ①以前一般我们会用frameset框架去写，这种方式非常的便利，但想要让其整体居中可能会有些问题。 ②除此外我们可以用比较笨的方式去实现，就是将左侧栏搞成一公共页面通过iframe在每个页面上都引入该页，在右侧更具左侧写相应的页面内容，好处是每个
原生JavaScript如何实现后台管理系统主题切换功能？
HelloWord176的博客
10-26 1363
在项目中我们总会遇到，可以切换主题的项目，比如这样： 当用户选择主题切换，选定某一主题之后，切换到相应主题的样式文件，而且在刷新页面的时候，样式依旧生效，而不是仅次于当前页面，那怎么实现这种功能呢？ 我们可以把用户点击之后的样式文件通过生命一个变量将其存到本地，当页面刷新进入新页面之后，调用刚刚切换的样式文件，就可以实现这种效果（缺陷就是：会有短暂的留白，望大神指教） 附上代码： link css样式文件正常引入即可 html(部分) <li ...
HTML+CSS+JavaScript后台管理页面1： 实现头部菜单，内容中分为左侧菜单和右侧表格以及返回顶部，表格中实现全选，反选，取消，添加。
风从北方来的博客
05-30 2481
代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link rel="stylesheet" href="fo
ASP外观专利图像检索平台(源代码+论文).rar
最新发布
07-21
ASP外观专利图像检索平台(源代码+论文)
javascript学习笔记--查看html元素和改变html的内容
06-01
好的，我可以为您解答关于 JavaScript 学习笔记方面的问题。针对您的问题，查看 HTML 元素和改变 HTML 内容是 JavaScript 中非常常见的操作之一，我们可以通过以下几种方式实现： 1. 通过 `document.getElementById...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值