本文主要介紹了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>
<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>相關推薦：
JavaScript實作向select下拉方塊中新增和刪除元素實例分享
jQuery使用EasyUi實作三級連動下拉方塊效果實例分享
以上是jQuery模擬下拉方塊選擇對應選單的詳細內容。更多資訊請關注PHP中文網其他相關文章！
