Maison >interface Web >js tutoriel >jQuery+CSS implémente la commutation de colonne d'étiquette (code ci-joint)

jQuery+CSS implémente la commutation de colonne d'étiquette (code ci-joint)

php中世界最好的语言original: 2018-04-26 09:37:122228parcourir

Cette fois, je vous propose jQuery+CSS pour réaliser le changement de colonne d'étiquette (avec code). Quelles sont les précautions pour que jQuery+CSS implémente le changement de colonne d'étiquette. Voici les cas pratiques. regarde.

Le code en cours d'exécution est le suivant

Le code spécifique est le suivant

<html>
 <head>
 <title>jQuery平滑滚动的标签分栏切换</title>
 <meta charset="gb2312">
 <style>
 ul,li{
 margin:0px;
 padding:0px;
 list-style:none
 }
 li{
 float:left;
 background-color:#8c6239;
 color:white;
 padding:5px;
 margin-right:2px;
 border:1px solid white;
 }
 li.myLi{
 background-color:#ea5500;
 border:1px solid #ea5500;
 }
 p{
 clear:left;
 background-color:#ea5500;
 color:white;
 width:300px;
 height:100px;
 padding:10px;
 display:none;
 }
 p.myp{
 display:block;
 }
 </style>
 <script src="./jquery-1.7.1.min.js"></script>
 <script>
 var timeId;
 $(document).ready(function(){
 $("li").each(function(index){
 //index是li数组的的索引值
 $(this).mouseover(function(){
 var liNode = $(this);
 //延迟是为了减少服务器压力，防止鼠标快速滑动
 timeId = setTimeout(function(){
  //将原来显示的p隐藏掉
  $("p.myp").removeClass("myp");
  //将原来的li的myLi去掉
  $("li.myLi").removeClass("myLi");
  //显示当前鼠标li的对应的p
  $("p").eq(index).addClass("myp");
  //增加当前li的myLi
  liNode.addClass("myLi");
 },300);
 }).mouseout(function(){
 clearTimeout(timeId);
 });
 });
 });
 </script>
 </head>
 <body>
 <ul>
 <li class="myLi">this is li 1</li>
 <li>this is li 2</li>
 <li>this is li 3</li>
 </ul>
 <p class="myp">this is p1</p>
 <p>this is p2</p>
 <p>this is p3</p>
 </body>
</html>

Je crois que vous maîtrisez la méthode après lire le cas dans cet article, c'est plus excitant. Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Jquery implémente le tri par glissement des éléments (avec code)

jQuery+Ajax implémente le tri des titres de données de table

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 jquery css ajax

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 implémente le tri par glisser-déposer des éléments (code ci-joint)Article suivant：jquery implémente le tri par glisser-déposer des éléments (code ci-joint)

Articles Liés

Voir plus