jquery實現控制radio單選切換不同的內容
我們在做網站過程中,有時需要製作單選內容,讓用戶選擇想看的內容,通過單選按鈕來進行切換,與tab欄選項卡類似。這時就需要用到jquery控制radio單選切換不同的內容。
實現代碼如下:
首先寫HTML代碼,放二個radio單選按鈕,以及二個不同內容的DIV;
1 2 3 |
<div class="codecolorer-container html4strict geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="html4strict codecolorer" style="white-space:nowrap"><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"choose"</span>></span><br><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">label</span>><<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"formweizhi"</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"radio"</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"houtai"</span> <span style="color: #66cc66;">/</span>></span>選項一<span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>></span><br><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">label</span>><<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"formweizhi"</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"radio"</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"yhemail"</span> <span style="color: #66cc66;">/</span>></span>選項二<span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>></span><br><span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>></span><br><br><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"show1"</span>></span><br> 內容一<br><span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>></span><br><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"show2"</span>></span><br> 內容二<br><span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>></span></div></div> |
再寫JQUERY代碼,用於控制radio單選切換不同的內容;
1 2 3 4 5 6 7 8 9 |
<div class="codecolorer-container javascript geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="javascript codecolorer" style="white-space:nowrap"><span style="color: #339933;"><</span>script<span style="color: #339933;">></span><br> jQuery<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">function</span> <span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br><span style="color: #006600; font-style: italic;">// 默認選中選項二</span><br> jQuery<span style="color: #009900;">(</span><span style="color: #3366CC;">".show1"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br> jQuery<span style="color: #009900;">(</span><span style="color: #3366CC;">'input:radio[name="formweizhi"]'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">eq</span><span style="color: #009900;">(</span><span style="color: #CC0000;">1</span><span style="color: #009900;">)</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"checked"</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #006600; font-style: italic;">// 通過radio切換不同的內容</span><br> jQuery<span style="color: #009900;">(</span><span style="color: #3366CC;">"input[name="formweizhi"]"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">change</span><span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">function</span> <span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br><span style="color: #000066; font-weight: bold;">var</span> vel <span style="color: #339933;">=</span> jQuery<span style="color: #009900;">(</span><span style="color: #3366CC;">'input:radio[name="formweizhi"]:checked'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">val</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span>vel <span style="color: #339933;">==</span> <span style="color: #3366CC;">'houtai'</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br> jQuery<span style="color: #009900;">(</span><span style="color: #3366CC;">".show2"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br> jQuery<span style="color: #009900;">(</span><span style="color: #3366CC;">".show1"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">show</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">{</span><br> jQuery<span style="color: #009900;">(</span><span style="color: #3366CC;">".show1"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br> jQuery<span style="color: #009900;">(</span><span style="color: #3366CC;">".show2"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">show</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><br><span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><span style="color: #009900;">)</span><br><br><span style="color: #339933;"></</span>script<span style="color: #339933;">></span></div></div> |
通過HTML+JQUERY 就可以實現點擊radio來切換顯示不同的內容了。
由於網站搬家,部分鏈接失效,如無法下載,請聯繫站長!謝謝支持!
1. 帶 [親測] 說明源碼已經被站長親測過!
2. 下載後的源碼請在24小時內刪除,僅供學慣用途!
3. 分享目的僅供大家學習和交流,請不要用於商業用途!
4. 本站資源售價只是贊助,收取費用僅維持本站的日常運營所需!
5. 本站所有資源來源於站長上傳和網路,如有侵權請郵件聯繫站長!
6. 沒帶 [親測] 代表站長時間緊促,站長會保持每天更新 [親測] 源碼 !
7. 盜版ripro用戶購買ripro美化無擔保,若設置不成功/不生效我們不支持退款!
8. 本站提供的源碼、模板、插件等等其他資源,都不包含技術服務請大家諒解!
9. 如果你也有好源碼或者教程,可以到審核區發布,分享有金幣獎勵和額外收入!
10.如果您購買了某個產品,而我們還沒來得及更新,請聯繫站長或留言催更,謝謝理解 !
GG資源網 » jquery實現控制radio單選切換不同的內容
1. 帶 [親測] 說明源碼已經被站長親測過!
2. 下載後的源碼請在24小時內刪除,僅供學慣用途!
3. 分享目的僅供大家學習和交流,請不要用於商業用途!
4. 本站資源售價只是贊助,收取費用僅維持本站的日常運營所需!
5. 本站所有資源來源於站長上傳和網路,如有侵權請郵件聯繫站長!
6. 沒帶 [親測] 代表站長時間緊促,站長會保持每天更新 [親測] 源碼 !
7. 盜版ripro用戶購買ripro美化無擔保,若設置不成功/不生效我們不支持退款!
8. 本站提供的源碼、模板、插件等等其他資源,都不包含技術服務請大家諒解!
9. 如果你也有好源碼或者教程,可以到審核區發布,分享有金幣獎勵和額外收入!
10.如果您購買了某個產品,而我們還沒來得及更新,請聯繫站長或留言催更,謝謝理解 !
GG資源網 » jquery實現控制radio單選切換不同的內容