Comment basculer entre le chinois et l'anglais dans la barre de navigation en js-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-04-18 16:54:40

original

2503 Les gens l'ont consulté

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>

Copier après la connexion

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!