jQuery模拟下拉框选择对应菜单的内容

先给大家展示下效果图：

下面一段代码给大家分享基于jquery实现的模拟下拉框选择对应菜单的内容，具体代码如下所示：

<!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>
<div class="zn-classreport-tabs">
 <div 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>
 </div>
 <div class="zn-classreport-tabscnt">
  <div class="zn-classreport-tabsbox active">
   <div class="zn-classreport-tabsbox-fl">
    <img class="img " src="upload/images/u149.jpg">
    <div 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>
    </div>
   </div>
   <div class="zn-classreport-tabsbox-fr"></div>
  </div>
  <div class="zn-classreport-tabsbox ">
   <div class="zn-classreport-tabsbox-fl">
    <img class="img " src="upload/images/goods-index-1.jpg">
    <div 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>
    </div>
   </div>
  </div>
  <div class="zn-classreport-tabsbox ">
   <div class="zn-classreport-tabsbox-fl">
    <img class="img " src="upload/images/wifi_04.jpg">
    <div 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>
    </div>
   </div>
  </div>
 </div>
</div>
<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> 

以上所述是小编给大家介绍的jQuery模拟下拉框选择对应菜单的内容，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！