Javascript显示和隐藏ul列表的方法

本文实例讲述了Javascript显示和隐藏ul列表的方法。分享给大家供大家参考。具体如下：

<ul id="rightNav">
 <li>
 <h2 class="rightNavItem"><a href="#">Show & Hide</a></h2>
 <ul>
 <li><a href="">Links etc here</a></li>
 </ul>
 </li>
</ul>
<script>
function enableRightNavExpand() {
 if (!document.getElementById) return false;
 if (!document.getElementById("rightNav")) return false;
 var nav = document.getElementById("rightNav");
 var navItem = nav.getElementsByTagName("li");
 for (var i = 0; i < navItem.length; i++){
  navItem[i].onclick=function() {
   if (this.className == "selected") {
    this.className = "";
   }
   else if (this.className == ""){
    this.className = "selected";
   }
  }
 }
}
</script>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • javascript动态修改Li节点值的方法

    本文实例讲述了javascript动态修改Li节点值的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

  • JavaScript实现向OL列表内动态添加LI元素的方法

    本文实例讲述了JavaScript实现向OL列表内动态添加LI元素的方法.分享给大家供大家参考.具体分析如下: JavaScript向OL列表内动态添加LI元素的方法,下面JS代码每次点击按钮都会想OL列表中动态添加一个LI <script type="text/javascript"> function addItem() { var myitem = document.getElementById("ItemToAdd").value; var my

  • 用javascript实现li 列表数据隔行变换背景颜色

    New Document title 111 222 333 444 555 666 objName=document.getElementById("list01").getElementsByTagName("li") for (i=0;i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • javascript实现的LI列表输出，隔行同色的代码

    无标题文档 .mytable {border-collapse:collapse;border:solid #6AA70B;border-width:0px 0 0 0px;width:50%;} .mytable ul li {padding-top:5px;text-indent:2em;list-style:none;background:url(http://www.blueidea.com/img/common/new_flash.gif) 3px 50% no-repeat;bord

  • JavaScript实现LI列表数据绑定的方法

    JavaScript实现LI列表数据绑定的方法

    本文实例讲述了JavaScript实现LI列表数据绑定的方法.分享给大家供大家参考.具体如下: 利用JavaScript进行LI列表数据绑定,获取列表里面对应的LI,这是一位高人写的代码,看了才知道,原来并不很复杂,为什么之前用的方法那么笨? 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/

  • javascript实现列表滚动的方法

    本文实例讲述了javascript实现列表滚动的方法.分享给大家供大家参考.具体如下: index.html如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type&quo

  • Javascript显示和隐藏ul列表的方法

    本文实例讲述了Javascript显示和隐藏ul列表的方法.分享给大家供大家参考.具体如下: <ul id="rightNav"> <li> <h2 class="rightNavItem"><a href="#">Show & Hide</a></h2> <ul> <li><a href="">Links et

  • JS控制HTML元素的显示和隐藏的两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementById("EleId").style.visibility="hidden"; document.getElementById("EleId").style.visibility="visible"; 利用上述方法实现隐藏后,页面

  • PHP使用DirectoryIterator显示下拉文件列表的方法

    本文实例讲述了PHP使用DirectoryIterator显示下拉文件列表的方法.分享给大家供大家参考.具体分析如下: PHP中使用DirectoryIterator显示下拉文件列表,要遍历一个目录中的所有文件,我们可以使用DirectoryIterator,下面的例子演示了如何在页面中输出一个指定目录的文件列表 <?php echo "<select name='file'>\n"; foreach (new DirectoryIterator('c:\wamp\w

  • JavaScript取得WEB安全颜色列表的方法

    本文实例讲述了JavaScript取得WEB安全颜色列表的方法.分享给大家供大家参考.具体如下: web安全颜色指的是 护眼色, 能够让访问者的眼睛舒服的颜色 //JavaScript取得216种WEB安全色值 var n = 0; var hex = new Array('FF', 'CC', '99', '66', '33', '00'); function colorPanel(){ for (var i = 0; i < 6; i++) { for (var j = 0; j < 6;

  • Android 显示和隐藏软键盘的方法(手动)

    Android 显示和隐藏软键盘的方法(手动)

    在Android开发中,经常会有一个需求,做完某项操作后,隐藏键盘,也即让Android中的软键盘不显示.今天,和大家分享如何利用代码来实现对Android的软件盘的隐藏.显示的操作. 1.方法一(如果输入法在窗口上已经显示,则隐藏,反之则显示) InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE); imm.toggleSoftInput(0, InputMeth

  • Android中AlertDilog显示简单和复杂列表的方法

    本文实例讲述了Android中AlertDialog显示简单和复杂列表的方法.分享给大家供大家参考,具体如下: AlertDialog 显示简单列表 setItems import Android.app.Activity; import android.app.AlertDialog; import android.content.DialogInterface; import android.os.Bundle; import android.os.Handler; import andro

  • ListView上滑和下滑,显示和隐藏Toolbar的实现方法

    1.准备Toolbar 先隐藏系统自带的actionbar,在AndroidManifest.xml文件<application>标签中: android:theme="@style/Theme.AppCompat.Light.NoActionBar"> (注意此处的Activity应继承AppCompatActivity) 再在布局文件中添加Toolbar,activity_main.xml文件中: <?xml version="1.0"

  • 微信小程序动态的显示或隐藏控件的方法(两种方法)

    微信小程序动态的显示或隐藏控件的方法(两种方法)

    在微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一把!上效果先 它的实现方法有两种, 第一种方法:单选法,就是隐藏与显示根据条件二选一,代码如下: <view class="{{showView?'bright789_view_show':'bright789_view_hide'}}"> <text class="bright789-text">我是被显示被隐藏控件</text>

  • 微信小程序之多列表的显示和隐藏功能【附源码】

    微信小程序之多列表的显示和隐藏功能【附源码】

    今天在项目碰到一个问题,之前在项目首页实现单列表的显示和隐藏,通过wx:if判断就可实现,现在要实现多列表的单项显示和隐藏功能应该如何实现呢?如果还用wx:if实现的话会出现点击一个列表项,多个列表同时显示和隐藏,明显不适合功能需求,然后简单地查了资料也没发现有类似的功能,最后思考一番后,慢慢地理清了思路... 效果图: 实现思路: 实现单个列表的显示和隐藏应该使用唯一元素让程序知道你应该显示和隐藏哪个列表项,可以用数据的id: css中定义一个hidden{display:none}控制显示和

  • Android Dialog中软键盘的显示与隐藏的示例

    Android Dialog中软键盘的显示与隐藏的示例

    1.写在前面 本篇的主要内容是关于在Dialog中软键盘的显示与隐藏问题,需求是在Dialog中有一个密码输入框,弹出Dialog显示软键盘,关闭Dialog隐藏软键盘. 嗯,是不是有点简单,不过在实现的过程中还是遇到了一些问题,在试过了网上大部分的方法之后,最终找到了一个还不错的方法,分享给大家. 看下效果图: 2.实现过程 先说说最开始的实现方法: // 显示Dialog dialog.show(); // 显示软键盘 SoftInputUtils.showSoftInput(activit

随机推荐