Code d'effet de menu à onglets coulissants de page Web simple implémenté dans js-js tutoriel-php.cn

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

PHP中文网

Libérer： 2017-04-18 10:45:29

original

1370 Les gens l'ont consulté

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>

Copier après la connexion