recherche

Maison  >  Article  >  interface Web  >  Comment basculer entre le chinois et l'anglais dans la barre de navigation en js

Comment basculer entre le chinois et l'anglais dans la barre de navigation en js

php中世界最好的语言
php中世界最好的语言original
2018-04-18 16:54:402463parcourir

Cette fois, je vais vous montrer comment basculer entre le chinois et l'anglais dans la barre de navigation avec js. Quelles sont les précautions pour basculer entre le chinois et l'anglais dans la barre de navigation avec js. cas pratique, jetons un coup d'oeil.

La hauteur de ul est la moitié de li, ul{overflow:hidden}

li:hover{margin-top:-40px;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>中英切换导航条</title>
<styletype="text/css">
*{padding:0; margin:0;}
li{ list-style:none; }
a{ text-decoration:none;}
.nav{ width:100%; height:40px; background:#222; margin-top:100px; overflow:hidden;}
.list{ width:1000px; height:40px; margin:0 auto;}
.list li{ float:left;}
.list li a{ display:block; transition:0.3s;}
.list b,.list i{ display:block; padding:0 30px; color:#aaa; line-height:40px; text-align:center;}
.list b{ font-weight:100}
.list i{ font-style:normal; background:#333; color:#fff;}
.list a:hover{ margin-top:-40px;}
</style>
</head>
<body>
<pclass="nav">
 <ulclass="list">
 <li>
  <ahref="#">
  <b>Index</b>
  <i>首页</i>
  </a>
 </li>
 <li>
  <ahref="#">
  <b>course</b>
  <i>职业课程</i>
  </a>
 </li>
 <li>
  <ahref="#">
  <b>study</b>
  <i>就业学习</i>
  </a>
 </li>
 <li>
  <ahref="#">
  <b>BBS</b>
  <i>社区</i>
  </a>
 </li>
 <li>
  <ahref="#">
  <b>JiKe+</b>
  <i>发现+</i>
  </a>
 </li>
 </ul>
</p>
</body>
</html>

Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention. vers d'autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Implémentation JS de la couverture d'échiquier

Explication détaillée de l'utilisation de l'héritage combiné parasite js

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!

php 继承 JS overflow margin ul li
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：Tutoriel d'introduction à WebPack détailléArticle suivant：Tutoriel d'introduction à WebPack détaillé

Articles Liés

Voir plus