Cet article vous apporte principalement un exemple d'utilisation de jQuery pour implémenter une simple boîte à onglets. L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil. J'espère que cela pourra vous aider à mieux utiliser jQuery pour implémenter une simple boîte à onglets.
code html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>实现简单的tab框</title> <link rel="stylesheet" href="css/tabDemo.css" rel="external nofollow" > <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/tabDemo.js"></script> </head> <body> <ul class="main"> <li class="style1">休闲装</li> <li>名媛</li> <li>运动服</li> </ul> <ul class="sublevel"> <li class="style2">女装 男装 童装</li> <li>甜美风 文艺风</li> <li>运动男 运动女</li> </ul> </body> </html>
code css
* { margin: 0; padding: 0px; } ul { width: 300px; margin: 10px auto; } ul li { list-style: none; } .main li { text-align: center; float: left; padding: 5px; margin-left: 10px; width: 80px; cursor: pointer; background-color: #f3f2e7; } .main .style1 { width: 50px; font-weight: bold; background-color: #f3f2e7; border: 1px solid #837979; border-bottom: 0; z-index: 100; position: relative; } .sublevel { width: 260px; height: 80px; padding: 19px; background-color: #f3f2e7; clear: left; border: 1px solid #837979; position:relative; top: -1px; } .sublevel li{ display: none; } .sublevel .style1{ display: block; }
code jquery
$(function () { //页面打开时 呈现的效果 $(".sublevel li:eq(0)").show(); //each遍历输出 $(".main li").each(function(index) { //click 点击 $(this).click(function() { //addClass()增加当前样式 removeClass()移除除当前点击之外的同级样式 $(this).addClass("main style1").siblings().removeClass("style1"); $(".sublevel li:eq("+index+")").show().siblings().hide(); }) }) })
Recommandations associées :
Partage de technologie de développement de pagination DataTables du plug-in JQuery
php Implémenter la lecture et l'écriture de fichiers divisés en tabulations
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!