javascript_javascript 팁으로 열 표시를 구현하는 팁-JS 튜토리얼-php.cn

javascript_javascript 팁으로 열 표시를 구현하는 팁

WBOY

풀어 주다： 2016-05-16 16:34:06

원래의

1383명이 탐색했습니다.

선배 학생들을 위해 시험 시스템을 테스트할 때 시험 페이지 왼쪽에 응시자 정보를 숨길 수 있는 것을 보고 그 당시에는 이 시스템이 매우 고급스럽고 사용자 친화적이라고 생각했습니다. 이제 JavaScript를 배웠으므로 이 기능도 구현할 수 있습니다.

1. 페이지 디자인:

(1).html 코드:

<title>js分栏</title> 
<style type="text/css"> 
.alignment{ 
text-align: center; 
} 
</style> 
</head> 
<script language="javascript" type="text/javascript"> 
//...... 
</script> 
<body> 
<table width="412" height="296" border="1"> 
<tr> 
<td width="113" height="292" id="lanmu"> 
<p class="alignment"><a href="#">栏目一</a></p> 
<p class="alignment"><a href="#">栏目二</a></p> 
<p class="alignment"><a href="#">栏目三</a></p> 
<p class="alignment"><a href="#">栏目四</a></p> 
<p class="alignment"><a href="#">栏目五</a></p> 
</td> 
<td width="15"> 
<span id="pic"><img src="image/left.PNG" width="15" height="39" onclick="hide()" /> 
</span> 
</td> 
<td width="360" class="alignment">这里是内容区域！</td> 
</tr> 
</table> 
</body> 
</html>

로그인 후 복사

(2) 설명: 실제로 이 페이지는 행 1개와 열 3개로 구성된 테이블로 매우 간단합니다. 첫 번째 부분에는 열 이름이 포함되고 세 번째 부분은 주요 내용입니다. 가운데 부분에 왼쪽(오른쪽) 화살표 그림이 있습니다. 예전에는 너무 많이 생각하고 아주 멋진 컨트롤이라고 생각했습니다.

2.자바스크립트 코드:

<script language="javascript" type="text/javascript"> 
function hide()//点击左箭头，隐藏栏目部分 
{ 
//第一步：隐藏栏目列表 
document.getElementById("lanmu").style.display="none"; 
//第二步：同时将箭头图片更换，左箭头响应的事件是显示show（） 
document.getElementById("pic").innerHTML="<img src='image/right.PNG' onclick='show()' />"; 
} 
function show()//点击右箭头，显示被隐藏的栏目部分 
{ 
//第一步：显示栏目列表 
document.getElementById("lanmu").style.display=""; 
//第二步：同时更换箭头图片，左箭头响应的事件是隐藏hide（） 
document.getElementById("pic").innerHTML="<img src='image/left.PNG' onclick='hide()' />"; 
} 
</script>

로그인 후 복사

(1) 효과:

(2) 참고: 처음에는 "왼쪽 화살표"가 표시되며 이미지를 클릭하면 hide() 이벤트에 응답하여 열이 부분적으로 숨겨지고 왼쪽 화살표가 오른쪽 화살표로 변경됩니다. "오른쪽 화살표"를 클릭하면 show() 이벤트에 응답하여 숨겨진 열 부분을 표시하는 동시에 오른쪽 화살표를 왼쪽 화살표로 변경하여 원래 상태로 돌아갑니다. 실제로 말하기는 매우 간단하고 실행하기 쉽습니다.

이번 자바스크립트 학습 단계를 통해 매우 흥미로운 느낌을 받았습니다. 이전에는 아무것도 몰랐을 때 늘 생각하기 어렵고 심리적인 부담이 컸는데, 직접 경험해 보니 그게 바로 그런 것이라는 걸 깨닫고 점차 배움에 대한 관심이 커졌습니다. 이제 웹사이트에 접속하거나 어떤 소프트웨어를 사용하다 보면 그것이 어떻게 구현되어 있는지, 무엇이 잘 되었는지, 어떤 점을 개선해야 하는지 생각하지 않을 수 없게 되면서 점차 전문가에 가까워지고 있습니다.

아직 JavaScript에 대해 배울 것이 많습니다. 오늘 보여드린 내용은 빙산의 일각에 불과합니다. 관심과 호기심을 갖고 계속 진행하세요.