实践笔记1

雨点打透心脏的1/2处 2022-05-26 00:41 138阅读 0赞

背景：由于毕业设计要求，现打算实现一个摄影网页，目前阶段实现网页布局

布局分为两部分，**主页和菜单栏**，菜单栏一开始先隐藏，通过主页按钮来点击显示。

这篇先从解决**菜单栏的显示/隐藏**的功能：

<div id="left">
      <button id="showRBtn"></button>
      </div>
      <div id="right">
          <div id="logoDiv">
            
          </div>
          <div id="cusInfo">
          </div>
          <div id="menuDiv">
             <ul>
              <li><a>MyPage</a></li>
              <li><a>Moment</a></li>
              <li><a>Find Modal</a></li>
              <li><a>Find Photpgrapher</a></li>
              <li><a>Contact us</a></li>
             </ul>
          </div>
          <div>

其中javascript实现功能代码如下：

var showMe=document.getElementById("showRBtn");
    var showRight=function(){
        var right=document.getElementById("right");  //获取元素
        if(right.style.display!=="block") {    //下面有解释
            right.style.display="block";
            }else{
            right.style.display="none";
                 }
    }
    showMe.addEventListener("click",showRight,false);   //添加事件处理程序，接受3个参数，分别为事件类型，事件函数以及Boolean（是否冒泡）

if条件语句为了判断该菜单栏是否已经显示，若为false则更改属性，否则隐藏属性。(主要实现toggle功能，方便用户隐藏以及显示菜单)

通过为按钮绑定事件处理程序，从而使菜单栏显示。

第一次写博文先到此为止，以后准备更充足再接再励。

值得注意的是，本文的事件处理程序没有进行跨浏览器兼容处理（attach()/on+"type"事件），往后可能会记录EventUtil的笔记。

\*多多指教，attach()方法好像写错方法名. =>attachEvent

发表评论取消回复

表情：

评论列表（有 0 条评论，138人围观）

还没有评论，来说两句吧...

相关阅读

相关 Docker 实践笔记

最近几天要跑一个关于3D目标检测的网络，用到如下命令 docker pull djiajun1206/pcdet-pytorch1.5 项目场景： dock

矫情吗；*/ 2022年11月10日 04:58/ 0 赞/ 182 阅读

相关并发编程实践1.1

看过《JAVA并发实战》应该对其中使用的注解有印象。使用注解来标注程序是否线程安全对维护代码很有好处。 2. 使用引入maven依赖即可 <!-- http

刺骨的言语ヽ痛彻心扉/ 2022年09月27日 14:25/ 0 赞/ 159 阅读

相关笔记1之Qt4初步初步实践o

打开Qt Creator创建一个名为hello的Qt Gui Application工程。注：这里所有文件都是自动生成的且除了main.cpp做了更改以外其它文件都未改动

﹏ヽ暗。殇╰゛Y/ 2022年07月14日 08:15/ 0 赞/ 221 阅读

相关实践笔记2

接着上文：果然是实践多经验，遇到卡住的地方解决了心里甚是舒畅第二部分，我实现点击菜单栏，切换主页的框架内容由于我菜单栏里的菜单有3个以上的菜单，为了避免多次通过getE

- 日理万妓/ 2022年05月26日 00:52/ 0 赞/ 182 阅读

相关实践笔记1

背景：由于毕业设计要求，现打算实现一个摄影网页，目前阶段实现网页布局布局分为两部分，主页和菜单栏，菜单栏一开始先隐藏，通过主页按钮来点击显示。这篇先从解决菜单栏的显示/

雨点打透心脏的1/2处/ 2022年05月26日 00:41/ 0 赞/ 139 阅读

相关特征工程实践笔记

一、特征工程 1、构造组合特征：对鸢尾花数据集，通过构造前两列相乘而得到的新列特征。代码实现过程：（1）获取数据：通过sklearn.datasets获取i

青旅半醒/ 2022年05月10日 13:10/ 0 赞/ 211 阅读

相关 OpenResty 最佳实践（1）

此文已由作者汤晓静授权网易云社区发布。欢迎访问[网易云社区][Link 1]，了解更多网易技术产品运营经验。 OpenResty 发展起源 Open

╰+攻爆jí腚メ/ 2022年04月15日 05:43/ 0 赞/ 221 阅读

相关 Istio 1.1安装部署实践

3月20日，Istio 1.1版本正式发布，我们已在[《全方位解读 | Istio v1.1正式发布》][_ _Istio v1.1]一文中为大家进行了简单介绍。本文将给大家

╰半橙微兮°/ 2022年02月27日 07:14/ 0 赞/ 325 阅读

相关 Redis 实践笔记

最近在项目中实践了一下Redis,过程中遇到并解决了若干问题,记录之. ![redis][] Why Redis 我们这个项目是对原有缓存系统的改进,应用场景是论

￡神魔★判官ぃ/ 2022年02月01日 09:19/ 0 赞/ 217 阅读

相关 webpack实践笔记

1）cross-env 能跨平台地设置及使用环境变量大多数情况下，在windows平台下使用类似于: NODE\_ENV=production的命令行指令会卡住，wind

谁借莪１个温暖的怀抱￠/ 2022年01月07日 15:01/ 0 赞/ 252 阅读