recherche

Maison >interface Web >js tutoriel >Méthode d'implémentation JS pour changer la porte coulissante en onglet

Méthode d'implémentation JS pour changer la porte coulissante en onglet

不言
不言original
2018-07-02 14:08:132176parcourir

Cet article présente principalement la méthode d'implémentation JS consistant à transformer les portes coulissantes en onglets (nécessitant des clics de souris), impliquant des techniques liées à la traversée des éléments de page JavaScript et au remplacement de style, puis grâce à onmouseover et onclick, les portes coulissantes et onclick peuvent être réalisées respectivement. Il existe deux effets d'onglets. Les amis qui en ont besoin peuvent se référer à

Cet article décrit la méthode d'implémentation pour transformer les portes coulissantes en onglets (nécessite un clic de souris) à l'aide de JS. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Comme nous le savons tous, la disposition et la structure des portes coulissantes et des onglets sont presque les mêmes. La seule différence est la méthode de déclenchement. Celle-ci est déterminée par JavaScript. changé en Il suffit de cliquer sur. Cet onglet était autrefois une porte coulissante populaire, mais maintenant il a été remplacé par un onglet. Jetons un coup d'œil à la différence.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant : 

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

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Introduction à JS natif simulant le panier Taobao

JS implémente Silver avec effet stéréoscopique 3D Code pour menu de réduction vertical gris

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：méthode de demande de données inter-domaines jsonp pour implémenter une requête de numéro de téléphone mobileArticle suivant：méthode de demande de données inter-domaines jsonp pour implémenter une requête de numéro de téléphone mobile

Articles Liés

Voir plus