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>関連する推奨事項:
以上がjQuery は、対応するメニューを選択するためのドロップダウン ボックスをシミュレートしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7486
15
1377
52
77
11
19
38
壁紙エンジンを家族間で共有できますか?
Mar 18, 2024 pm 07:28 PM
壁紙はファミリー共有をサポートしていますか? 残念ながら、サポートされていません。それでも、解決策はあります。たとえば、小さいアカウントで購入したり、最初に大きいアカウントでソフトウェアや壁紙をダウンロードしてから小さいアカウントに変更したりすることができます。ソフトウェアを起動するだけでまったく問題ありません。壁紙エンジンはファミリー共有できますか? 回答: 現在、壁紙はファミリー共有機能をサポートしていません。 1.WallpaperEngine は家族共有環境には適していないようです。 2. この問題を解決するには、新しいアカウントの購入を検討することをお勧めします; 3. または、最初にメインアカウントで必要なソフトウェアと壁紙をダウンロードしてから、他のアカウントに切り替えることをお勧めします。 4. 軽くクリックしてソフトウェアを開くだけで問題ありません。 5. 上記の Web ページでプロパティを表示できます。」
壁紙エンジンでロック画面の壁紙を設定するにはどうすればよいですか?壁紙エンジンの使い方
Mar 13, 2024 pm 08:07 PM
WallpaperEngine は、デスクトップの壁紙を設定するためによく使用されるソフトウェアです。ユーザーは、WallpaperEngine でお気に入りの写真を検索して、デスクトップの壁紙を生成できます。また、コンピュータから写真を WallpaperEngine に追加して、コンピュータの壁紙として設定することもできます。壁紙エンジンがロック画面の壁紙を設定する方法を見てみましょう。壁紙エンジン設定ロック画面の壁紙チュートリアル 1. まずソフトウェアに入り、インストール済みを選択し、「壁紙オプションの設定」をクリックします。 2. 別の設定で壁紙を選択した後、右下の「OK」をクリックする必要があります。 3. 次に、上の設定とプレビューをクリックします。 4. 次へ
壁紙エンジンの映画を見るとウイルスに感染することがありますか?
Mar 18, 2024 pm 07:28 PM
WallpaperEngine を使用すると、さまざまな壁紙をダウンロードでき、ダイナミック壁紙も使用できます。WallpaperEngine で動画を視聴するときにウイルスに感染しているかどうかわからないユーザーも多くいますが、動画ファイルがウイルスとして使用されることはありません。壁紙エンジンで映画を見るときにウイルスはありますか? 答え: いいえ。 1. 動画ファイルだけではウイルスとして利用できません。 2. ウイルス感染のリスクを避けるために、信頼できるソースからビデオをダウンロードし、コンピュータのセキュリティ対策を維持するようにしてください。 3. アプリケーションの壁紙は apk 形式であり、apk にはトロイの木馬ウイルスが含まれている可能性があります。 4.WallpaperEngine自体にはウイルスはありませんが、クリエイティブワークショップの一部のアプリケーション壁紙にはウイルスが感染している可能性があります。
壁紙エンジンの壁紙はどのフォルダにありますか?
Mar 19, 2024 am 08:16 AM
壁紙を利用する場合、ユーザーは自分の好みの壁紙をダウンロードして利用することができますが、その壁紙がどのフォルダーにあるのか分からないユーザーも多くいます。壁紙はどのフォルダにありますか? 答え: コンテンツ フォルダです。 1. ファイルエクスプローラーを開きます。 2. 左側の「このPC」をクリックします。 3.「STEAM」フォルダーを見つけます。 4.「steamapps」を選択します。 5.「ワークショップ」をクリックします。 6. 「コンテンツ」フォルダーを見つけます。
壁紙エンジンは多くの電力を消費しますか?
Mar 18, 2024 pm 08:30 PM
ユーザーは、WallpaperEngine を使用するときに自分のコンピュータの壁紙を変更できます。多くのユーザーは、WallpaperEngine が大量の電力を消費することを知りません。動的壁紙は静的壁紙よりも若干多くの電力を消費しますが、それほど多くはありません。壁紙エンジンは多くの電力を消費しますか? 回答: それほど多くはありません。 1. 動的壁紙は静的壁紙よりも若干多くの電力を消費しますが、それほど多くはありません。 2. ダイナミック壁紙をオンにすると、コンピュータの電力消費量が増加し、少量のメモリ使用量が奪われます。 3. ユーザーは、ダイナミック壁紙の深刻な電力消費を心配する必要はありません。
Microsoft Edge ブラウザーでフォント サイズを変更する方法 - Microsoft Edge ブラウザーでフォント サイズを変更する方法
Mar 04, 2024 pm 05:58 PM
Microsoft Edge ブラウザに馴染みがないと思いますが、Microsoft Edge ブラウザのフォント サイズを変更する方法をご存知ですか? Microsoft Edge ブラウザのフォント サイズを変更する方法については、次の記事で説明していますので、一緒に勉強してみましょう。まず、Microsoft Edge ブラウザを見つけてダブルクリックして開きます。 Microsoft Edge ブラウザーはデスクトップのショートカット、スタート メニュー、またはタスクバーにあり、ダブルクリックして開きます。次に、[設定] インターフェイスを開いてこのブラウザ インターフェイスに入り、左上隅にある [...] ロゴをクリックし、[設定] をダブルクリックして設定インターフェイスを開きます。もう一度、[外観]インターフェイスを見つけて開き、マウスで下にスクロールします。
壁紙エンジンのサブスクリプション記録はどこにありますか?
Mar 18, 2024 pm 05:37 PM
壁紙の購読記録を確認するにはどうすればよいですか? 多くのユーザーはこのソフトウェアで多数の購読を行っていますが、これらの記録を照会する方法がわからないかもしれません。実際には、ソフトウェアのブラウジング機能領域で操作するだけで済みます。壁紙エンジンのサブスクリプション レコードはどこにありますか? 回答: ブラウジング インターフェイス内です。 1. まずコンピュータを起動し、壁紙ソフトウェアを入力してください。 2. アプリケーションの左上隅にある「参照」タブのアイコンを見つけてクリックします。 3. 「参照」インターフェースでは、さまざまな壁紙とフィードの概要が表示されます。 4. 右上隅の検索ボックスに検索したいキーワードを入力します。 5. 検索結果に基づいて、壁紙のサブスクリプションのソース情報を見つけることができます。 6. 対応するフィードをクリックして、その Web ページにアクセスします。 7. 注文
デジモンニューエイジ5作品の中からどれを選べばいいですか？
Mar 15, 2024 pm 03:58 PM
「デジモン ニュー エイジ」は、3 年の歳月をかけて丁寧に磨き上げた新作です。このゲームには、皆さんの幼少期の思い出が詰まっています。計画は調整され、近日中に発売されます。5 つのデジモン ニュー エイジの中からどれを選ぶべきですか?デジモンニューエイジのおすすめペット5選を紹介します。デジモン新世紀ファイブ：アースグレイモン、シーライオンモン、レオモン、フェアリーモン、サンフラワーモンのどれを選ぶべきですか?グレイモンとレオモンを選択することをお勧めします。彼らはチーム化に適しており、序盤と後半の両方で良いペットです。イベントの場所: 1. QQ を開いてゲームセンターに行き、デジモン新世紀 QQ 限定予約イベントを見つけます; 2. イベントをクリックして入り口を見つけ、イベントに参加してお気に入りのパートナーを選択してください。
