脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript 隐藏div

JavaScript栏目列表隐藏/显示简单实现

 更新时间：2013年04月03日 15:28:13   作者：  
隐藏侧边栏，并将图片换成右箭头图片;显示侧边栏，并将图片换成左箭头，这样的效果想必大家都很熟悉吧，接下来实现下，感兴趣的朋友可以参考下哈
1.构建JavaScript库
复制代码 代码如下:

(function(){

//将命名空间IC注册到window
window['JSHide']={};

//隐藏侧边栏，并将图片换成右箭头图片
function yc()
{
document.getElementById("cloone").style.display ="none";
document.getElementById("img").innerHTML ="<img src='Image/右箭头.png' width='10' height='10' longdesc='Image/右箭头.png' onclick='JSHide.xs()' />";

}
window['JSHide']['yc']=yc;

//显示侧边栏，并将图片换成左箭头
function xs()
{
document.getElementById("cloone").style.display ="";
document.getElementById("img").innerHTML ="<img src='Image/左箭头.png' width='10' height='10' longdesc='Image/左箭头.png' onclick='JSHide.yc()' />";

}
window['JSHide']['xs']=xs;
})();

2.将JS文件插入到HTML文件中：
“插入”--“HTML”--"脚本对象"---“脚本”，选择好脚本文件后将其插入到HTML文件中。
3.HTML文件代码
复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript分栏模式</title>
<script language="JavaScript" type="text/javascript" src="JS/JSHide.js"></script>
</head>
<body>
<table width="425" height="198" border="1">
<tr>
<td id="cloone" width="55" align="center" valign="middle" scope="row">
<p><a href="if测试.html" target="_blank">栏目一</a></p>
<p><a href="for循环.html" target="_blank">栏目二</a></p>
<p><a href="CSS初步变色消失出现.html" target="_blank">栏目三</a></p>
<p><a href="1加到100.html" target="_blank">栏目四</a></p>
<p><a href="JS初步.html" target="_blank">栏目五</a></p>
</td>
<td width="102" align="center" valign="middle">
<span id="img">
<img src="Image/左箭头.png" width="10" height="20" longdesc="Image/左箭头.png" onclick="JSHide.yc()"/>
</span>
</td>
<td width="71" align="center" valign="middle">这里是内容区域</td>
<td width="169" align="center" valign="middle"><input type="text" name="textfield" id="txtid" value="yesle" /></td>
</tr>
</table>
</body>
</html>
您可能感兴趣的文章:

相关文章

  • Canvas实现动态粒子文字效果的代码示例

    Canvas实现动态粒子文字效果的代码示例

    这篇文章主要介绍了如何用Canvas实现动态粒子文字效果,文中有完整的代码示例,文章通过代码介绍的非常清楚,感兴趣的小伙伴跟着小编一起来看看吧
    2023-08-08
  • LayUi数据表格自定义赋值方式

    LayUi数据表格自定义赋值方式

    今天小编就为大家分享一篇LayUi数据表格自定义赋值方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • js简单实现用户注册信息的校验代码

    js简单实现用户注册信息的校验代码

    这篇文章介绍了js简单实现用户注册信息的校验代码，有需要的朋友可以参考一下
    2013-11-11
  • JavaScript正则表达式中g标志详解

    JavaScript正则表达式中g标志详解

    正则的思想都是一样的,但是具体的写法会有所不同,下面这篇文章主要给大家介绍了关于JavaScript正则表达式中g标志的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • Javascript中关于Array.filter()的妙用详解

    Javascript中关于Array.filter()的妙用详解

    大家应该都知道filter是Javascript中Array常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。下面这篇文章就给大家介绍了关于Javascript中Array.filter()的妙用，有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-12-12
  • JavaScript Math.round() 方法

    JavaScript Math.round() 方法

    math.round()方法将对参数进行四舍五入操作，对js math.round相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • JavaScript中高级语法??表达式用法示例详解

    JavaScript中高级语法??表达式用法示例详解

    这篇文章主要为大家介绍了JavaScript中高级语法??表达式用法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • Javascript 获取鼠标当前的位置实现方法

    Javascript 获取鼠标当前的位置实现方法

    这篇文章主要介绍了Javascript 获取鼠标当前的位置实现方法的相关资料,需要的朋友可以参考下
    2016-10-10
  • 详解关于html，css，js三者的加载顺序问题

    详解关于html，css，js三者的加载顺序问题

    这篇文章主要介绍了关于html，css，js三者的加载顺序问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • JavaScript Date对象功能与用法学习记录

    JavaScript Date对象功能与用法学习记录

    这篇文章主要介绍了JavaScript Date对象功能与用法,结合实例形式总结分析了JavaScript Date对象基本功能、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04

最新评论