Heim > Artikel > Web-Frontend > JS-Implementierungsmethode zum Ändern der Schiebetür in eine Lasche

JS-Implementierungsmethode zum Ändern der Schiebetür in eine Lasche

不言Original: 2018-07-02 14:08:132136Durchsuche

In diesem Artikel wird hauptsächlich die JS-Implementierungsmethode zum Umwandeln von Schiebetüren in Registerkarten (Mausklicks erforderlich) vorgestellt, die Techniken zum Durchlaufen von JavaScript-Seitenelementen und zum Ersetzen von Stilen umfasst. Anschließend können durch Onmouseover und Onclick Schiebetüren bzw. Onclick realisiert werden. Es gibt zwei Effekte von Tabs. Freunde, die es benötigen, können sich auf

beziehen. Dieser Artikel beschreibt die Implementierungsmethode zum Umwandeln von Schiebetüren in Tabs (erfordert einen Mausklick) mithilfe von JS. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:

Wie wir alle wissen, sind das Layout und die Struktur von Schiebetüren und Tabs nahezu identisch. Der einzige Unterschied besteht in der Auslösemethode. Dies wird im Allgemeinen durch JavaScript bestimmt Früher war diese Registerkarte eine beliebte Schiebetür, aber jetzt wurde sie in eine Registerkarte geändert. Mal sehen, was der Unterschied ist.

Der Screenshot des Laufeffekts lautet wie folgt:

Der spezifische Code lautet wie folgt:

<!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>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einführung in native js, die den Taobao-Einkaufswagen simulieren

JS implementiert Silber mit 3D-Stereoskopieeffekt Code für graues vertikales Minimierungsmenü

Das obige ist der detaillierte Inhalt vonJS-Implementierungsmethode zum Ändern der Schiebetür in eine Lasche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JSONP-Methode zur domänenübergreifenden Anforderung von Daten zur Implementierung der Abfrage von MobiltelefonnummernNächster Artikel：JSONP-Methode zur domänenübergreifenden Anforderung von Daten zur Implementierung der Abfrage von Mobiltelefonnummern

In Verbindung stehende Artikel

Mehr sehen