jQuery模擬下拉方塊選擇對應選單
本文主要介紹了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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
wallpaper engine能家庭共享嗎
Mar 18, 2024 pm 07:28 PM
請問Wallpaper是否支持家庭共享呢?很遺憾，不能支持哦。儘管如此，我們仍有解決方案。例如，可以用小號購買或先由大號下載好軟體和壁紙，然後再更換到小號。簡單啟動軟體是完全沒問題的。 wallpaperengine能家庭共享嗎答：Wallpaper暫不支援家庭共享功能。 1.據了解，WallpaperEngine似乎不適合家庭共享環境。 2.為了解決這個困擾，建議您考慮購買全新帳號;3、或先在主帳號下載所需軟體和桌布，再切到其他帳號。 4.只要輕觸開啟軟體，便無礙。 5、您可以在上述網頁上查看屬性“
wallpaper engine怎麼設定鎖定螢幕桌布？ wallpaper engine使用方法
Mar 13, 2024 pm 08:07 PM
wallpaperengine是常用於設定桌面壁紙的軟體，使用者在wallpaperengine裡可以搜尋自己喜歡的圖片來產生桌面壁紙，也支援將電腦中的圖片加入到wallpaperengine中設定成電腦桌布。下面就來看看wallpaperengine設定鎖定螢幕桌布的方法吧。 wallpaperengine設定鎖定畫面壁紙教學 1、先進入軟體，然後選擇已安裝，點選「設定壁紙選項」。 2、單獨設定選擇完壁紙後需點選右下方的確定。 3、再去點選上方的設定選和預覽。 4、接下來
wallpaper engine看片有病毒嗎
Mar 18, 2024 pm 07:28 PM
使用者在使用wallpaperengine可以下載各種壁紙，也可以使用動態壁紙，有很多使用者不知道wallpaperengine看片有沒有病毒，只是影片檔是無法當作病毒的。 wallpaperengine看片有病毒嗎答：不會。 1、只是視訊檔案是無法作為病毒的。 2、只要確保從可信的來源下載視頻，並保持電腦的安全防護措施，就可以避免病毒感染的風險。 3.應用程式類壁紙是apk格式，apk可能會攜帶木馬病毒。 4.WallpaperEngine本身沒有病毒，但是創意工坊裡的一些應用程式類壁紙可能有病毒。
wallpaper engine的壁紙在哪個文件夾
Mar 19, 2024 am 08:16 AM
使用者在使用wallpaper時可以下載各種自己喜歡的桌布來使用，有許多使用者不知道wallpaper的桌佈在哪個資料夾，使用者下載的桌布存放在content資料夾裡。 wallpaper的壁紙在哪個文件夾答：content文件夾。 1、開啟檔案總管。 2、點選左側「此電腦」。 3、找到“STEAM”資料夾。 4、選擇“steamapps”。 5、點選“workshop”。 6.找尋「content」資料夾。
wallpaper engine耗電多嗎
Mar 18, 2024 pm 08:30 PM
使用者在使用wallpaperengine時可以更改自己的電腦桌布，有很多使用者不知道wallpaperengine耗電多嗎，動態桌布是會比靜態壁紙更耗電一點，但耗得不是很多。 wallpaperengine耗電多嗎答：不多。 1.動態壁紙是會比靜態壁紙更耗電一點，但耗得不是很多。 2.開啟動態桌布會增加電腦耗電量，並帶走一小小部分記憶體佔用。 3.用戶不需要擔心動態壁紙消耗電比較嚴重的。
Microsoft Edge瀏覽器怎麼更改字體大小-Microsoft Edge瀏覽器更改字體大小的方法
Mar 04, 2024 pm 05:58 PM
想必大家對MicrosoftEdge瀏覽器並不模式，不過你們知道MicrosoftEdge瀏覽器怎麼更改字體大小嗎?下面這篇文章就講述了MicrosoftEdge瀏覽器更改字體大小的方法，讓我們一起去下文好好學習學習吧。首先,找到MicrosoftEdge瀏覽器雙擊開啟。可在桌面快速鍵、開始功能表或工作列找到MicrosoftEdge瀏覽器，並雙擊開啟。其次，開啟【設定】介面開啟進入這個瀏覽器介面，點選左上角【...】標識;雙擊【設定】，開啟進入設定介面。再次，找到並開啟【外觀】介面滑鼠滾動下
wallpaper engine訂閱記錄在哪
Mar 18, 2024 pm 05:37 PM
請問怎麼查看wallpaper訂閱記錄呢?許多用戶在該軟體上進行了大量的訂閱，但可能不清楚如何查詢這些記錄。其實，您只需要在軟體的瀏覽功能區進行操作即可。 wallpaperengine訂閱記錄在哪答：在瀏覽介面。 1.請先啟動電腦，並進入wallpaper軟體。 2、找到應用程式左上方的瀏覽標籤圖示並點擊。 3.在「瀏覽」介面中，您將看到各類壁紙及訂閱源的總覽。 4.在右上角的搜尋框中輸入您想要搜尋的關鍵字。 5.依靠搜尋結果，你便能找到訂閱壁紙的來源資訊。 6.點選對應的訂閱源，即可進入其網頁。 7、在訂
數碼寶貝新世紀五選一選哪一個
Mar 15, 2024 pm 03:58 PM
數碼寶貝新世紀是一款新遊戲，歷時三年精心打磨，這款遊戲承載了大家的年少回憶，計劃調整就快要上線了，數碼寶貝新世紀五選一選哪個？一起看數碼寶貝新世紀五選一寵物推薦。數碼寶貝新世紀五選一選哪個大地暴龍獸、海獅獸、獅子獸、仙女獸、向日葵獸推薦大家選擇暴龍獸和獅子獸，比較適合配隊，不管是前期還是後期都是不錯的寵物。活動位置：1、打開qq，前往遊戲中心，在裡面找到數碼寶貝新世紀QQ專屬預約活動；2、點擊活動，找到入口，即可參與活動，開始選擇心儀的伙伴。
