溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
先給大家展示下效果圖：
下面一段代碼給大家分享基于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模擬下拉框選擇對應菜單的內容，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
