Home > Article > Web Front-end > jQuery simulates drop-down box to select corresponding menu

jQuery simulates drop-down box to select corresponding menu

小云云Original: 2018-01-23 13:10:481262browse

This article mainly introduces the content of the menu corresponding to the jQuery simulation drop-down box selection. It is very good and has reference value. Friends in need can refer to it. I hope it can help everyone.

Let me show you the renderings first:

The following code will share with you the simulated drop-down box based on jquery to select the content of the corresponding menu. , the specific code is as follows:

<!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>

Related recommendations:

JavaScript implementation of adding and deleting elements to the select drop-down box Share

jQuery uses EasyUi to implement three-level linkage drop-down box effect example sharing

jQuery implements select drop-down box to obtain the currently selected text

The above is the detailed content of jQuery simulates drop-down box to select corresponding menu. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery implements click-to-display content drop-down effectNext article：jQuery implements click-to-display content drop-down effect

See more

jQuery simulates drop-down box to select corresponding menu

Related articles