interface Web
js tutoriel
jQuery simule une liste déroulante pour sélectionner le menu correspondant
jQuery simule une liste déroulante pour sélectionner le menu correspondant
Cet article présente principalement le contenu du menu correspondant de sélection de la simulation jQuery. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer.
Laissez-moi d'abord vous montrer les rendus :
Le code suivant partagera avec vous le contenu du menu correspondant sélectionné dans le drop simulé -down box basé sur jquery , le code spécifique est le suivant :
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul,li,a,p{margin: 0;padding: 0;}
a{text-decoration: none; color: #555;font-size: 23px;}
.zn-classreport-tabs{}
.zn-classreport-tabstle{
font-size: 16px;
position: relative;
width: 200px;
margin: 15px 20px;
line-height: 35px;
cursor: pointer;
padding: 0px 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
.zn-classreport-tabstle>ul{
display: none;
position: absolute;
top: 36px;
left: 0;
width: 90%;
background: #fff;
padding: 10px;
border: 1px solid #ccc;
}
.zn-classreport-tabstle li{
float: left;
text-align: center;
width: 100%;
font-size: 14px;
margin-bottom: 4px;
}
.zn-classreport-tabstle li:hover,.zn-classreport-tabstle li.active{
background-color: #ccc;
color: #fff;
}
.zn-classreport-tabscnt{
float: left;
width: 100%;
}
.zn-classreport-tabsbox{
margin: 10px;
display: none;
font-size: 16px;
}
.zn-classreport-tabsbox.active{
display: block;
}
.zn-classreport-tabsbox img{
width: 350px;
}
</style>
</head>
<body>
<p class="zn-classreport-tabs">
<p class="zn-classreport-tabstle">
<span>请选择课程</span>
<input type="hidden" name="test_1" class="value" value="" />
<ul class="select">
<li value="1">蒙妮妮摄影班</li>
<li value="2">昕丽冲印班</li>
<li value="3">宝丽冲印班</li>
</ul>
</p>
<p class="zn-classreport-tabscnt">
<p class="zn-classreport-tabsbox active">
<p class="zn-classreport-tabsbox-fl">
<img class="img " src="upload/images/u149.jpg">
<p class="text">
<p>蒙妮妮摄影班</p>
<p><span>课程介绍：</span></p><p><span><br></span></p><p><span>本课程包括摄影基础、曝光、构图，器材的使用</span></p><p><span>和摄影小技巧，风光摄影初级，人像摄影及婚纱</span></p><p><span>摄影，产品摄影，重点讲解人像写真与私房摄影，</span></p><p><span>作品点评，PS基础、数码调色与常用技巧。</span></p>
</p>
</p>
<p class="zn-classreport-tabsbox-fr"></p>
</p>
<p class="zn-classreport-tabsbox ">
<p class="zn-classreport-tabsbox-fl">
<img class="img " src="upload/images/goods-index-1.jpg">
<p class="text">
<p>昕丽冲印班</p>
<p><span>课程介绍：</span></p><p><span><br></span></p><p><span>本课程包括摄影基础、曝光、构图，器材的使用</span></p><p><span>和摄影小技巧，风光摄影初级，人像摄影及婚纱</span></p><p><span>摄影，产品摄影，重点讲解人像写真与私房摄影，</span></p><p><span>作品点评，PS基础、数码调色与常用技巧。</span></p>
</p>
</p>
</p>
<p class="zn-classreport-tabsbox ">
<p class="zn-classreport-tabsbox-fl">
<img class="img " src="upload/images/wifi_04.jpg">
<p class="text">
<p>宝丽冲印班</p>
<p><span>课程介绍：</span></p><p><span><br></span></p><p><span>本课程包括摄影基础、曝光、构图，器材的使用</span></p><p><span>和摄影小技巧，风光摄影初级，人像摄影及婚纱</span></p><p><span>摄影，产品摄影，重点讲解人像写真与私房摄影，</span></p><p><span>作品点评，PS基础、数码调色与常用技巧。</span></p>
</p>
</p>
</p>
</p>
</p>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//报班系列
$('.zn-classreport-tabs ').each(function(){
var _this = $(this);
var cur_tab = false; //当前标签
$(_this).find('.zn-classreport-tabstle').each(function(){
var _tlethis = $(this);
var select = $(this).find('.select');
var hidden = $(this).find('.value');
var span = $(this).find('span');
$( _tlethis).click(function(){
$(select).show();
})
$(_tlethis).find('ul.select li').each(function(){
$(this).click(function(){
$(hidden).val( $(this).attr('value') );
$(select).hide();
$(span).html($(this).html());
return false;
});
});
});
//多标签内容处理
$(_this).find('.zn-classreport-tabstle li').click(function(){
if (cur_tab == this) {
return true;
}
now_pos = $(cur_tab).index();//开始的
new_pos = $(this).index();//当前的
$(_this).find('.zn-classreport-tabsbox').eq(now_pos).removeClass('active');
$(_this).find('.zn-classreport-tabsbox').eq(new_pos).addClass('active');
$(cur_tab).removeClass('active');
$(this).addClass('active');
cur_tab=this;
});
$(_this).find('.zn-classreport-tabstle li').first().click();
});
});
</script>
</body>
</html>Recommandations associées :
jQuery implémente la liste déroulante de sélection pour obtenir le texte actuellement sélectionné
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Le moteur de papier peint peut-il être partagé entre les familles ?
Mar 18, 2024 pm 07:28 PM
Wallpaper prend-il en charge le partage familial ? Malheureusement, il ne peut pas être pris en charge ? Pourtant, nous avons des solutions. Par exemple, vous pouvez acheter avec un petit compte ou télécharger d'abord le logiciel et les fonds d'écran à partir d'un grand compte, puis passer au petit compte. Il suffit de lancer le logiciel. Wallpaperengine peut-il être partagé en famille ? Réponse : Wallpaper ne prend actuellement pas en charge la fonction de partage familial. 1. Il est entendu que WallpaperEngine ne semble pas adapté aux environnements de partage familial. 2. Afin de résoudre ce problème, il est recommandé d'envisager d'acheter un nouveau compte ; 3. Ou de télécharger d'abord les logiciels et les fonds d'écran requis dans le compte principal, puis de passer à d'autres comptes. 4. Ouvrez simplement le logiciel avec un léger clic et tout ira bien. 5. Vous pouvez consulter les propriétés sur la page Web ci-dessus"
Comment définir le fond d'écran de verrouillage sur le moteur de fond d'écran ? Comment utiliser le moteur de fond d'écran
Mar 13, 2024 pm 08:07 PM
WallpaperEngine est un logiciel couramment utilisé pour définir des fonds d'écran. Les utilisateurs peuvent rechercher leurs images préférées dans WallpaperEngine pour générer des fonds d'écran. Il prend également en charge l'ajout d'images depuis l'ordinateur vers WallpaperEngine pour les définir comme fonds d'écran. Jetons un coup d'œil à la manière dont WallpaperEngine définit le fond d'écran de l'écran de verrouillage. Tutoriel de fond d'écran de configuration de l'écran de verrouillage de Wallpaperengine 1. Entrez d'abord le logiciel, puis sélectionnez installé et cliquez sur « Configurer les options de papier peint ». 2. Après avoir sélectionné le fond d'écran dans des paramètres séparés, vous devez cliquer sur OK en bas à droite. 3. Cliquez ensuite sur les paramètres et l'aperçu ci-dessus. 4. Suivant
Y a-t-il un virus lorsque l'on regarde des films avec un moteur de fond d'écran ?
Mar 18, 2024 pm 07:28 PM
Les utilisateurs peuvent télécharger divers fonds d'écran lorsqu'ils utilisent WallpaperEngine et peuvent également utiliser des fonds d'écran dynamiques. De nombreux utilisateurs ne savent pas s'il existe des virus lorsqu'ils regardent des vidéos sur WallpaperEngine, mais les fichiers vidéo ne peuvent pas être utilisés comme virus. Y a-t-il un virus lorsque vous regardez des films sur WallpaperEngine ? Réponse : Non. 1. Seuls les fichiers vidéo ne peuvent pas être utilisés comme virus. 2. Assurez-vous simplement de télécharger des vidéos à partir de sources fiables et de maintenir des mesures de sécurité informatique pour éviter tout risque d'infection virale. 3. Les fonds d'écran des applications sont au format apk et apk peut contenir des virus chevaux de Troie. 4. WallpaperEngine lui-même ne contient pas de virus, mais certains fonds d'écran d'application de l'atelier de création peuvent contenir des virus.
Dans quel dossier se trouvent les fonds d'écran du moteur de papier peint ?
Mar 19, 2024 am 08:16 AM
Lorsqu'ils utilisent un fond d'écran, les utilisateurs peuvent télécharger divers fonds d'écran qu'ils souhaitent utiliser. De nombreux utilisateurs ne savent pas dans quel dossier se trouvent les fonds d'écran. Les fonds d'écran téléchargés par les utilisateurs sont stockés dans le dossier de contenu. Dans quel dossier se trouve le fond d’écran ? Réponse : dossier de contenu. 1. Ouvrez l'Explorateur de fichiers. 2. Cliquez sur « Ce PC » à gauche. 3. Recherchez le dossier "STEAM". 4. Sélectionnez "steamapps". 5. Cliquez sur « atelier ». 6. Recherchez le dossier « contenu ».
Le moteur de papier peint consomme-t-il beaucoup d'énergie ?
Mar 18, 2024 pm 08:30 PM
Les utilisateurs peuvent modifier les fonds d'écran de leur ordinateur lorsqu'ils utilisent WallpaperEngine. De nombreux utilisateurs ne savent pas que WallpaperEngine consomme beaucoup d'énergie. Les fonds d'écran dynamiques consomment un peu plus d'énergie que les fonds d'écran statiques, mais pas beaucoup. Le moteur de papier peint consomme-t-il beaucoup d’énergie ? Réponse : Pas beaucoup. 1. Les fonds d’écran dynamiques consomment un peu plus d’énergie que les fonds d’écran statiques, mais pas beaucoup. 2. L'activation du fond d'écran dynamique augmentera la consommation d'énergie de l'ordinateur et supprimera une petite quantité d'utilisation de la mémoire. 3. Les utilisateurs n'ont pas à s'inquiéter de la consommation d'énergie importante des fonds d'écran dynamiques.
Comment modifier la taille de la police dans le navigateur Microsoft Edge - Comment modifier la taille de la police dans le navigateur Microsoft Edge
Mar 04, 2024 pm 05:58 PM
Je suppose que vous n'êtes pas familier avec le navigateur Microsoft Edge, mais savez-vous comment modifier la taille de la police dans le navigateur Microsoft Edge ? L'article suivant décrit comment modifier la taille de la police dans le navigateur Microsoft Edge. Tout d’abord, recherchez le navigateur Microsoft Edge et double-cliquez dessus pour l’ouvrir. Vous pouvez trouver le navigateur Microsoft Edge dans le raccourci du bureau, le menu Démarrer ou la barre des tâches, et double-cliquer pour l'ouvrir. Deuxièmement, ouvrez l'interface [Paramètres] pour accéder à cette interface de navigateur, cliquez sur le logo [...] dans le coin supérieur gauche ; double-cliquez sur [Paramètres] pour ouvrir l'interface des paramètres. Encore une fois, recherchez et ouvrez l'interface [Apparence] et faites défiler vers le bas avec la souris.
Où se trouve le relevé d'abonnement au moteur de papier peint ?
Mar 18, 2024 pm 05:37 PM
Comment vérifier les enregistrements d'abonnement au papier peint ? De nombreux utilisateurs ont souscrit un grand nombre d'abonnements à ce logiciel, mais ils ne savent peut-être pas comment interroger ces enregistrements. En fait, il vous suffit de l'utiliser dans la zone des fonctions de navigation du logiciel. Où se trouvent les enregistrements d’abonnement à WallpaperEngine ? Réponse : Dans l’interface de navigation. 1. Veuillez d'abord démarrer l'ordinateur et accéder au logiciel de fond d'écran. 2. Recherchez l'icône de l'onglet Parcourir dans le coin supérieur gauche de l'application et cliquez dessus. 3. Dans l'interface « Parcourir », vous verrez un aperçu des différents fonds d'écran et flux. 4. Saisissez les mots-clés que vous souhaitez rechercher dans le champ de recherche dans le coin supérieur droit. 5. En vous appuyant sur les résultats de la recherche, vous pouvez trouver les informations sources de l'abonnement au fond d'écran. 6. Cliquez sur le flux correspondant pour accéder à sa page Web. 7. Commande
Lequel dois-je choisir parmi les cinq jeux Digimon New Age ?
Mar 15, 2024 pm 03:58 PM
Digimon New Age est un nouveau jeu qui a mis trois ans à être soigneusement peaufiné. Ce jeu porte les souvenirs d'enfance de chacun. Le plan sera ajusté et sera bientôt lancé. Lequel devriez-vous choisir parmi les cinq Digimon New Ages ? Jetons un coup d'œil aux cinq recommandations d'animaux de compagnie pour Digimon New Age. Digimon New Century Five : Lequel choisir : EarthGreymon, SeaLionmon, Leomon, FairyMon et Sunflowermon ? Je vous recommande de choisir Greymon et Leomon. Ils sont plus adaptés à l'équipe et sont de bons animaux de compagnie au début et à la fin. Lieu de l'événement : 1. Ouvrez QQ, accédez au centre de jeu et recherchez l'événement de réservation exclusif Digimon New Century QQ ; 2. Cliquez sur l'événement, trouvez l'entrée, puis participez à l'événement et commencez à choisir votre partenaire préféré.
