Simple implementation of hiding/showing JavaScript column list

Home

Web Front-end

JS Tutorial

Simple implementation of hiding/showing JavaScript column list_javascript skills

May 16, 2016 pm 05:38 PM

div javascript hide

1. Build JavaScript library

Copy the code The code is as follows:

 
( function(){ 

//Register the namespace IC to window 
window['JSHide']={}; 

//Hide the sidebar and replace the image with Right arrow image
function yc() 
{ 
document.getElementById("cloone").style.display ="none"; 
document.getElementById("img").innerHTML ="&lt ;img src='Image/right arrow.png' width='10' height='10' longdesc='Image/right arrow.png' onclick='JSHide.xs()' />"; 

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

//Show the sidebar and change the image to the left arrow
function xs() 
 { 
document.getElementById("cloone").style.display =""; 
document.getElementById("img").innerHTML ="<img src='Image/leftarrow.png' width= '10' height='10' longdesc='Image/Left Arrow.png' onclick='JSHide.yc()' />"; 

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

2. Insert the JS file into the HTML file :
"Insert"--"HTML "--"Script Object"---"Script", select the script file and insert it into the HTML file.
3.HTML file code

Copy code The code is as follows:

 
<!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 column mode</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 test.html" target="_blank">Column 1</a></p> 
<p><a href="for loop.html" target="_blank">Column 2</a></p> 
<p><a href="CSS initially changes color and disappears.html" target="_blank">Column 3</a></p&gt ; 
<p><a href="1Add to 100.html" target="_blank">Column 4</a></p> 
<p><a href="JS preliminary.html" target="_blank">Column 5</a></p> 
</td> 
<td width="102" align="center " valign="middle"> 
<span id="img"> 
<img src="Image/leftarrow.png" width="10" height="20" longdesc=" Image/Left Arrow.png" onclick="JSHide.yc()"/> 
</span> 
</td> 
<td width="71" align="center " valign="middle">This is the content area</td> 
<td width="169" align="center" valign="middle"><input type="text" name= "textfield" id="txtid" value="yesle" /></td> 
</tr> 
</table> 
</body> 
< /html> 

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn