显示/隐藏侧边栏

显示/隐藏

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" 的

  • JS实现随页面滚动显示/隐藏窗口固定位置元素

    窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该元素:当页面位置小于某高度,或者页面向上滚动时,隐藏该元素. 先给大家展示下效果图: 1.html <p id="selected-case-count"><span class='form-control'>已选: <span class="casecount">0</span></span></p> 2.css p#sel

  • 基于jquery实现页面滚动时顶部导航显示隐藏

    本文实例讲述了jquery实现页面滚动时顶部导航显示隐藏效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 引入核心文件 <script src="js/jquery/1.11.1/jquery.min.js"></script> 构建html,margint这个div中为了出现滚动条而建,并无实际作用. <div class="top-title">这是顶部导航条</div> <di

  • javascript 控制 html元素 显示/隐藏实现代码

    1.编写js函数 <script type="text/javascript"> function display(y){$(y).style.display=($(y).style.display=="none")?"":"none";} function $(s){return document.getElementById(s);} </script> 2. 要显示/隐藏的html元素加上 id

  • 原生js实现密码输入框值的显示隐藏

    本文实例为大家分享了js显示隐藏密码输入框值的具体代码,供大家参考,具体内容如下 直接贴上代码 <!DOCTYPE html> <html> <head> <title>password intput demo</title> </head> <style type="text/css"> body{ margin:0px; background-color: white; font-family: '

  • 右键显示(隐藏)扩展名的bat代码

    "显示/隐藏 系统文件"需右键单击任意文件夹或文件才能显示菜单 "显示/隐藏 扩展名"需右键单击任意文件夹里的空白处才能显示菜单 右键显示(隐藏)扩展名及系统文件.bat 复制代码 代码如下: @echo off reg delete "HKCR\CLSID\{00000000-0000-0000-0000-000000000012}" /f >nul 2>nul reg delete "HKLM\SOFTWARE\Clas

  • JS实现点击链接切换显示隐藏内容的方法

    本文实例讲述了JS实现点击链接切换显示隐藏内容的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 点击链接切换显示隐藏内容</title> <style> a { cursor: pointer

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

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

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

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

随机推荐