Maison > Article > interface Web > Code d'effet de menu à onglets coulissants de page Web simple implémenté dans js

Code d'effet de menu à onglets coulissants de page Web simple implémenté dans js

PHP中文网original: 2017-04-18 10:45:291293parcourir

Cet article présente principalement le simple code d'effet de menu à onglets coulissants de page Web implémenté dans js, qui peut réaliser la fonction simple de changer d'étiquette d'onglet en faisant glisser la souris dessus. C'est très simple et pratique. Les amis dans le besoin peuvent s'y référer. cet article

L'exemple décrit le simple code d'effet de menu à onglets coulissants de page Web implémenté dans js. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Ce qui est introduit ici est un simple code de porte coulissante Web, implémenté sur la base de JS et p CSS. Le menu de la porte coulissante est un menu qui peut être commuté en plaçant simplement la souris dessus. Il est uniquement différent de l'onglet de la page Web dans le formulaire d'opération. Pour modifier l'onglet de la porte coulissante, remplacez simplement le survol de la souris par un clic. . Après l'avoir modifié, changez Le contenu nécessite un clic de souris sur le menu de la porte.

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>
* {list-style-type:none; font-size:12px; text-decoration:none; margin:0; padding:0;}
.tab{ margin:20px; width:244px; height:200px; overflow:hidden; border:1px #AACCEE solid;}
.tab_b{ overflow:hidden; margin:5px; }
.menu{overflow:hidden; }
.menu li{ display:block; float:left; display: list-item; text-align:center; width:60px; background-color:#EDF4FC;line-height:20px; border-bottom:1px #AACCEE solid;border-right:1px #AACCEE solid; }
.menu li a{ display:block;}
.menu_d{border-bottom:1px #FFFFFF solid;background-color:#FFFFFF; }
.tab ul li.aaa{background: #FFFFFF;border-bottom:0px #FFFFFF solid;}
</style>
</head>
<body>
<script language="javascript">
function tabs(n)
{
var len = 4;
for (var i = 1; i <= len; i++)
{
document.getElementById(&#39;tab_a&#39; + i).style.display = (i == n) ? &#39;block&#39; : &#39;none&#39;;
document.getElementById(&#39;tab_&#39; + i).className = (i == n) ? &#39;aaa&#39; : &#39;none&#39;;
}
}
</script>
<p class="tab">
<ul class="menu" id="menutitle">
<li id="tab_1" class="aaa"><a href="javascript:void(0)" onclick="tabs(&#39;1&#39;);" >新闻</a></li>
<li id="tab_2" ><a href="javascript:void(0)" onmouseover="tabs(&#39;2&#39;);" >生活</a></li>
<li id="tab_3" ><a href="javascript:void(0)" onmouseover="tabs(&#39;3&#39;);" >滚动</a></li>
<li id="tab_4" ><a href="javascript:void(0)" onmouseover="tabs(&#39;4&#39;);" >旅游</a></li>
</ul>
<p class="tab_b" id="tab_a1" style="display:block;"> 国内国际新闻</p>
<p class="tab_b" id="tab_a2" style="display:none;">本土快乐生活</p>
<p class="tab_b" id="tab_a3" style="display:none;">适时新闻滚动</p>
<p class="tab_b" id="tab_a4" style="display:none;">期待完美假日</p>
</p>
</body>
</html>

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：jQuery réalise en cliquant sur la petite image pour afficher le code de la grande image Sharing_jqueryArticle suivant：jQuery réalise en cliquant sur la petite image pour afficher le code de la grande image Sharing_jquery

Articles Liés

Voir plus