标准布局应用：显示/隐藏侧边栏 [附详细注解]

显示/隐藏

function pr()
{
var L=document.getElementById("left"); // 变量：L代表 id="left" 的标记
var R=document.getElementById("right"); // 变量：R代表 id="right" 的标记
if (L.className=="left") // 判断：如果 id="left" 的class值 等于left的话，将执行下面{}里面的内容
{
L.className="left1"; // 给 id="left" 的标记 加上class：left1
R.className=" "; // id="right" 的标记 加上class：空格，也就是消除class
}
else // 判断：如果 id="left" 的class值 不等于left的话，将执行下面{}里面的内容
{
L.className="left"; // 给 id="left" 的标记 加上class：left
R.className="right"; // 给 id="right" 的标记 加上class：right
}
}

显示/隐藏
俺是个js初学者，献丑了。这段js演示其实很简单，俺在这里只是想跟js大大们说一句：js是行为，不要跟样式表打架。有些事还是该由css来做的，例如：display:none || display:block，简直泛滥成灾了！俺只会玩玩css，拿到js不会改，不敢改，唉。明明一个class就能甩给css做的事，js为啥要抢着做呢？搞得俺们这些会点css滴菜鸟们好是郁闷~难道玩css就一定要会js么？

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 标准布局应用：显示/隐藏侧边栏 [附详细注解]

    显示/隐藏 function pr() { var L=document.getElementById("left"); // 变量:L代表 id="left" 的标记 var R=document.getElementById("right"); // 变量:R代表 id="right" 的标记 if (L.className=="left") // 判断:如果 id="left" 的

  • 显示/隐藏侧边栏

    显示/隐藏 function pr() { var L=document.getElementById("left"); // 变量:L代表 id="left" 的标记 var R=document.getElementById("right"); // 变量:R代表 id="right" 的标记 if (L.className=="left") // 判断:如果 id="left" 的

  • Android ListView自动显示隐藏布局的实现方法

    借助View的OnTouchListener接口来监听listView的滑动,通过比较与上次坐标的大小,判断滑动方向,并通过滑动方向来判断是否需显示或者隐藏对应的布局,并且带有动画效果. 1.自动显示隐藏Toolbar 首先给listView增加一个HeaderView,避免第一个Item被Toolbar遮挡. View header=new View(this); header.setLayoutParams(new AbsListView.LayoutParams( AbsListView.

  • 神奇的listView实现自动显示隐藏布局Android代码

    借助View的OnTouchListener接口来监听listView的滑动,通过比较与上次坐标的大小,判断滑动方向,并通过滑动方向来判断是否需显示或者隐藏对应的布局,并且带有动画效果. 1.自动显示隐藏Toolbar 首先给listView增加一个HeaderView,避免第一个Item被Toolbar遮挡. View header=new View(this); header.setLayoutParams(new AbsListView.LayoutParams( AbsListView.

  • Android实现标题显示隐藏功能

    Android实现标题显示隐藏功能

    本文实例尝试模仿实现Android标题显示隐藏功能,通过给listview设置 mListView.setOnTouchListener 监听 重写ontouch方法 监听手指一动的坐标,当超过ViewConfiguration.get(this).getScaledTouchSlop(); toubar的高度 .当向上滑动超过这个高度显示touba 向下滑动隐藏. 效果图: package com.example.hidetitlebardemo; import android.animati

  • Android中实现EditText密码显示隐藏的方法

    Android中实现EditText密码显示隐藏的方法

    在Google发布了support:design:23+以后我们发现有这么一个东西TextInputLayout,先看下效果图: <android.support.design.widget.TextInputLayout android:id="@+id/pwdLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:passw

  • Android软键盘的显示隐藏功能实现过程

    Android软键盘的显示隐藏功能实现过程

    一.软键盘显示的原理 软件盘的本质是什么?软键盘其实是一个Dialog! InputMethodService为我们的输入法创建了一个Dialog,并且将该Dialog的Window的某些参数(如Gravity)进行了设置,使之能够在底部或者全屏显示.当我们点击输入框时,系统对活动主窗口进行调整,从而为输入法腾出相应的空间,然后将该Dialog显示在底部,或者全屏显示. 二.活动主窗口调整 android定义了一个属性,名字为windowSoftInputMode, 用它可以让程序可以控制活动主

  • vue实现密码显示隐藏切换功能

    先给大家分享效果图: 具体实现代码如下所示: html: <group> <span>设置密码</span> <x-input :type="this.registration_data.pwdType" placeholder="请填写密码" @on-change="password"></x-input> <img :src="this.registration_da

  • vue实现密码显示隐藏功能的思路详解

    vue实现密码显示隐藏功能的思路详解

    效果: 思路: 利用input的type属性,当type值是text的时候展示密码,当type值是password的时候隐藏密码: 于是很容易想到用v-bind来绑定type,同时用一个布尔值来控制,写成三元表达式的形式: 加入一个图片元素,点击图标元素切换这个布尔值,就可以达到切换显示隐藏,切换布尔值的同时也切换图标. 页面布局 <div id='app'> <!--三元表达式 pwdFlag为真则type是password密码隐藏 pwdFlag为假则type是text密码显示 --

  • JavaScript实现星座查询功能 附详细代码

    JavaScript实现星座查询功能 附详细代码

    目录 一.题目 二.代码 三.结果 四.总结 一.题目 在文本框中输入一个生日值,点击按钮,可以显示此生日的对应星座.定义一个函数,该函数用来接收一个生日值(月日组成的4位字符串,比如"0210","1225"等),并根据该生日值提示属于的星座. 二.代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>星座查询&l

随机推荐