recherche

Maison  >  Article  >  interface Web  >  jquery implémente un effet d'onglet TAB super simple code_jquery

jquery implémente un effet d'onglet TAB super simple code_jquery

WBOY
WBOYoriginal
2016-05-16 15:41:561043parcourir

L'exemple de cet article décrit l'implémentation d'un code d'effet de tabulation ultra-concis à l'aide de jquery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

C'est un onglet TAB super simple. Personnellement, je le trouve un peu trop simple et je n'y suis pas habitué. Il vaudrait mieux l'embellir. En effet, il est préférable d'ajouter une couleur de fond à la TAB cliqué pour la distinguer.

Jetons un coup d'œil aux captures d'écran de l'effet de course :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/jquery-easy-tab-cha-menu-codes/

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超简洁的TAB选项卡</title>
<style>
body {font:normal 12px/20px simsun; margin:0 auto; padding:0;} 
* {margin: 0px; padding: 0px;}
h4{font-size:14px;}
h5{font-size:12px;}
img {border:none;}
ul,li{list-style-type:none;}
a{text-decoration:none;}
a:link{text-decoration:none;}
a:hover{text-decoration:underline; color:#ffae00;}
.menu li{width:60px; height:30px; text-align:center; line-height:30px; float:left; cursor:pointer;}
.menu li:hover, .menu li.on{color:#f00;}
.cont{width:180px; height:100px; border:1px solid #666666; clear:both;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $(".menu li").click(function(){   
  var Num=$(this).index("li");
  $(".menu li").removeClass("on").eq(Num).addClass("on");
  $(".cont").hide().eq(Num).show();  
  });       
 });
</script>
</head>
<body>
<div class="tab"> 
 <ul class="menu">
 <li class="on">北欧之旅</li>
 <li>音乐维也纳</li>
 <li>天堂瑞士</li>
 </ul>
 <div class="cont">北欧之旅</div>
 <div class="cont" style="display:none;">音乐维也纳</div>
 <div class="cont" style="display:none;">天堂瑞士</div>
</div>
</body>
</html>

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.

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 changement de colonne d'étiquette à défilement fluide effect_jqueryArticle suivant：jQuery implémente le changement de colonne d'étiquette à défilement fluide effect_jquery

Articles Liés

Voir plus