javascript_javascript 팁으로 열 표시를 구현하는 팁
선배 학생들을 위해 시험 시스템을 테스트할 때 시험 페이지 왼쪽에 응시자 정보를 숨길 수 있는 것을 보고 그 당시에는 이 시스템이 매우 고급스럽고 사용자 친화적이라고 생각했습니다. 이제 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에 대해 배울 것이 많습니다. 오늘 보여드린 내용은 빙산의 일각에 불과합니다. 관심과 호기심을 갖고 계속 진행하세요.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7400
15
1630
14
1358
52
1268
25
1217
29
JavaScript로 문자열 문자를 교체하십시오
Mar 11, 2025 am 12:07 AM
JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명 이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다. JavaScript 코드 내부의 문자열을 교체하십시오 가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다. str = str.replace ( "find", "replace"); 이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오. str = str.replace (/fi
8 멋진 jQuery 페이지 레이아웃 플러그인
Mar 06, 2025 am 12:48 AM
손쉬운 웹 페이지 레이아웃에 대한 jQuery 활용 : 8 에센셜 플러그인 jQuery는 웹 페이지 레이아웃을 크게 단순화합니다. 이 기사는 프로세스를 간소화하는 8 개의 강력한 JQuery 플러그인을 강조합니다. 특히 수동 웹 사이트 생성에 유용합니다.
자신의 Ajax 웹 응용 프로그램을 구축하십시오
Mar 09, 2025 am 12:11 AM
그래서 여기 당신은 Ajax라는이 일에 대해 배울 준비가되어 있습니다. 그러나 정확히 무엇입니까? Ajax라는 용어는 역동적이고 대화식 웹 컨텐츠를 만드는 데 사용되는 느슨한 기술 그룹을 나타냅니다. 원래 Jesse J에 의해 만들어진 Ajax라는 용어
내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까?
Mar 18, 2025 pm 03:12 PM
기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.
Ajax를 사용하여 상자 컨텐츠를 동적으로로드합니다
Mar 06, 2025 am 01:07 AM
이 튜토리얼은 Ajax를 통해로드 된 동적 페이지 상자를 작성하여 전체 페이지 재 장전없이 인스턴트 새로 고침을 가능하게합니다. jQuery 및 JavaScript를 활용합니다. 맞춤형 Facebook 스타일 컨텐츠 박스 로더로 생각하십시오. 주요 개념 : Ajax와 JQuery
10 JQuery Fun 및 Games 플러그인
Mar 08, 2025 am 12:42 AM
10 재미있는 jQuery 게임 플러그인 웹 사이트를보다 매력적으로 만들고 사용자 끈적함을 향상시킵니다! Flash는 여전히 캐주얼 웹 게임을 개발하기위한 최고의 소프트웨어이지만 JQuery는 놀라운 효과를 만들 수 있으며 Pure Action Flash 게임과 비교할 수는 없지만 경우에 따라 브라우저에서 예기치 않은 재미를 가질 수 있습니다. jQuery tic 발가락 게임 게임 프로그래밍의 "Hello World"에는 이제 jQuery 버전이 있습니다. 소스 코드 jQuery Crazy Word Composition 게임 이것은 반은 반은 게임이며, 단어의 맥락을 알지 못해 이상한 결과를 얻을 수 있습니다. 소스 코드 jQuery 광산 청소 게임
JavaScript 용 쿠키리스 세션 라이브러리를 작성하는 방법
Mar 06, 2025 am 01:18 AM
이 JavaScript 라이브러리는 Window.Name 속성을 활용하여 쿠키에 의존하지 않고 세션 데이터를 관리합니다. 브라우저에 세션 변수를 저장하고 검색하기위한 강력한 솔루션을 제공합니다. 라이브러리는 세 가지 핵심 방법을 제공합니다 : 세션
jQuery 시차 자습서 - 애니메이션 헤더 배경
Mar 08, 2025 am 12:39 AM
이 튜토리얼은 jQuery를 사용하여 매혹적인 시차 배경 효과를 만드는 방법을 보여줍니다. 우리는 멋진 시각적 깊이를 만드는 계층화 된 이미지가있는 헤더 배너를 만들 것입니다. 업데이트 된 플러그인은 jQuery 1.6.4 이상에서 작동합니다. 다운로드
