집 > 기사 > 웹 프론트엔드 > 슬라이딩 도어를 탭으로 변경하는 JS 구현 방법

슬라이딩 도어를 탭으로 변경하는 JS 구현 방법

不言원래의: 2018-07-02 14:08:132143검색

이 글에서는 JavaScript 페이지 요소 순회 및 스타일 교체와 관련된 기술을 포함하여 슬라이딩 도어를 탭으로 변경(마우스 클릭 필요)하는 JS 구현 방법을 주로 소개한 다음 onmouseover 및 onclick을 통해 두 효과에 대해 각각 슬라이딩 도어와 탭을 구현합니다. , 필요하신 친구들은 참고하시면 됩니다

본 글에서는 JS를 이용하여 미닫이문을 탭(마우스 클릭 필요)으로 변경하는 구현 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

우리 모두 알고 있듯이 슬라이딩 도어와 탭은 레이아웃과 구조가 거의 동일합니다. 유일한 차이점은 트리거 방식이 JavaScript에 의해 결정된다는 점입니다. 일반적으로 onmouseover를 onclick으로 변경하면 됩니다. . 이 탭은 예전에는 미닫이문으로 많이 쓰였는데 지금은 탭으로 바뀌었나요? 차이점을 살펴보겠습니다.

런닝 효과의 스크린샷은 다음과 같습니다.

구체적인 코드는 다음과 같습니다.

<!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>
<title>滑动门改为选项卡</title>
<style>
*{
padding:0;margin:0;
font-size:12px;
}
#main{
margin:20px;
}
ul{
width:600px;
}
#tab li{
list-style:none;
float:left;
text-align:center;
padding:0;
}
#tab a{
display:block;
text-decoration:none;
width:94px;
line-height:24px;
}
#cont{
clear:both;
border:1px solid blue;
border-top:0;
width:562px!important;
width:564px;
height:190px;
overflow-y:hidden;
}
.common{
margin:5px;
}
.common li{
list-style:none;
padding-left:14px!important;
padding-left:0;
padding-top:4px;
}
.common li a{
text-decoration:none;
}
.common li a:hover{
color:red;
}
.on{
background:url(images/tabs3.gif) no-repeat left bottom;
}
.off{
background:url(images/tabs2.gif) no-repeat left bottom;
}
</style>
<script>
function $(ID){
return document.getElementById(ID)
}
function showTab(ID){
for(var i=1;i<7;i++){
if(ID==i){
$(&#39;tab&#39;+i).blur();
$("tab"+i).className="on";
$("cont"+i).style.display="block";
}else{
$("tab"+i).className="off";
$("cont"+i).style.display="none";
}
}
return false;
}
</script>
</head>
<body>
<p id="main">
<p id="tab">
<ul>
<li><a href="javascript:void(0)" id="tab1" class="on" onclick="showTab(&#39;1&#39;)">C#源代码</a></li>
<li><a href="javascript:void(0)" id="tab2" class="off" onclick="showTab(&#39;2&#39;)">VB源代码</a></li>
<li><a href="javascript:void(0)" id="tab3" class="off" onclick="showTab(&#39;3&#39;)">VC源代码</a></li>
<li><a href="javascript:void(0)" id="tab4" class="off" onclick="showTab(&#39;4&#39;)">JQUERY脚本</a></li>
<li><a href="javascript:void(0)" id="tab5" class="off" onclick="showTab(&#39;5&#39;)">Delphi代码</a></li>
<li><a href="javascript:void(0)" id="tab6" class="off" onclick="showTab(&#39;6&#39;)">JAVA源代码</a></li>
</ul>
</p>
<p id="cont" >
<p id="cont1" class="common" style="display:block;">
<li><a href="#" target="_blank">30多个C#基础学习实例</a></li>
</p>
<p style="display:none;" id="cont2" class="common">
<li><a href="#" target="_blank">VB仿Photoshop曲线调整图像亮度源程序</a></li>
</p>
<p style="display:none;" id="cont3" class="common">
<li><a href="#" target="_blank">VC仿RealonePlayer播放器的窗体界面</a></li>
</p>
<p style="display:none;" id="cont4" class="common">
<li><a href="#" target="_blank">Farbtastic jQuery圆形网页取色插件</a></li>
</p>
<p style="display:none;" id="cont5" class="common">
<li><a href="#" target="_blank">Delphi基础学习实例代码</a></li>
</p>
<p style="display:none;" id="cont6" class="common">
<li><a href="#" target="_blank">Java图书管理程序代码</a></li>
</p>
</p>
</p>
</body>
</html>

위는 이 글의 전체 내용입니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목하세요!

슬라이딩 도어를 탭으로 변경하는 JS 구현 방법

관련 기사