Maison > Article > interface Web > jQuery simule une liste déroulante pour sélectionner le menu correspondant

jQuery simule une liste déroulante pour sélectionner le menu correspondant

小云云original: 2018-01-23 13:10:481300parcourir

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(){ 
  //报班系列 
  $(&#39;.zn-classreport-tabs &#39;).each(function(){ 
   var _this = $(this); 
   var cur_tab = false; //当前标签 
   $(_this).find(&#39;.zn-classreport-tabstle&#39;).each(function(){ 
    var _tlethis = $(this); 
    var select = $(this).find(&#39;.select&#39;); 
    var hidden = $(this).find(&#39;.value&#39;); 
    var span = $(this).find(&#39;span&#39;); 
    $( _tlethis).click(function(){ 
     $(select).show(); 
    }) 
    $(_tlethis).find(&#39;ul.select li&#39;).each(function(){ 
     $(this).click(function(){ 
      $(hidden).val( $(this).attr(&#39;value&#39;) ); 
      $(select).hide(); 
      $(span).html($(this).html()); 
      return false; 
     }); 
    }); 
   }); 
   //多标签内容处理 
   $(_this).find(&#39;.zn-classreport-tabstle li&#39;).click(function(){ 
    if (cur_tab == this) { 
     return true; 
    } 
    now_pos = $(cur_tab).index();//开始的 
    new_pos = $(this).index();//当前的 
    $(_this).find(&#39;.zn-classreport-tabsbox&#39;).eq(now_pos).removeClass(&#39;active&#39;); 
    $(_this).find(&#39;.zn-classreport-tabsbox&#39;).eq(new_pos).addClass(&#39;active&#39;); 
    $(cur_tab).removeClass(&#39;active&#39;); 
    $(this).addClass(&#39;active&#39;); 
    cur_tab=this; 
   }); 
   $(_this).find(&#39;.zn-classreport-tabstle li&#39;).first().click(); 
  }); 
 }); 
</script> 
</body> 
</html>

Recommandations associées :

JavaScript implémente. ajout et suppression dans la liste déroulante de sélection Partage d'exemples d'éléments

jQuery utilise EasyUi pour implémenter le partage d'exemples d'effets de liste déroulante de liaison à trois niveaux

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!

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 l'effet de liste déroulante de contenu en cliquant pour afficherArticle suivant：jQuery implémente l'effet de liste déroulante de contenu en cliquant pour afficher

Articles Liés

Voir plus