快捷導(dǎo)航

ASP.NET jQuery 實例10 動態(tài)修改hyperlink的URL值

更新時間：2012年02月03日 17:01:33 作者：

這節(jié)我們來看下如何實現(xiàn)通過選擇RadioButtonList值動態(tài)改變hyperlink控件的URL值，并簡要介紹bind和live方法的區(qū)別

1.先準(zhǔn)備界面代碼：

 
<form id="form1" runat="server"> 
<div align="left"> 
<fieldset style="width: 300px; height: 200px;"> 
<table cellpadding="0" cellspacing="0" border="0"> 
<tr> 
<td style="width: 10px"> 
</td> 
<td> 
<p> 
更新網(wǎng)址:</p> 
<asp:RadioButtonList ID="rblUrl" runat="server"> 
<asp:ListItem Text="新浪" Value="http://www.sina.com.cn"></asp:ListItem> 
<asp:ListItem Text="百度" Value="http://www.baidu.com"></asp:ListItem> 
<asp:ListItem Text="網(wǎng)易" Value="http://www.163.com"></asp:ListItem> 
</asp:RadioButtonList> 
<br /> 
<asp:HyperLink ID="hyperLink" runat="server">點擊這兒</asp:HyperLink> 
</td> 
</tr> 
</table> 
</fieldset> 
</div> 
</form> 

2.RadioButtonList轉(zhuǎn)換成<table/>，其成員轉(zhuǎn)換為<input type="radio"/>,下面是實現(xiàn)改變URL值的腳本代碼：

復(fù)制代碼代碼如下:

 
<head runat="server"> 
<title>Recipe10</title> 
<script src="Scripts/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
$("input[type=radio]").bind("change", function () { 
$("#<%=hyperLink.ClientID %>").attr("href", $(this).val()); 
}); 
}); 
</script> 
</head> 

3.實現(xiàn)界面效果：

4.另外我們可以通過下面的代碼實現(xiàn)綁定change事件：

復(fù)制代碼代碼如下:

 
$("input=[type=radio]").live("change", function(){ 
$("a").attr("href", $(this).val()); 
}); 

5.live()和bind()函數(shù)的區(qū)別：
live()函數(shù)可以附加事件到現(xiàn)在的和將來的頁面元素上。然而，bind()函數(shù)只能把事件附加到已經(jīng)加載過的頁面元素上。
也就是說bind()適合頁面靜態(tài)元素而live()適合頁面靜態(tài)和動態(tài)元素。

您可能感興趣的文章:

相關(guān)文章

JQuery的Validation插件中Remote驗證的中文問題
前段時間，再次出現(xiàn)AJAX中文編碼問題，導(dǎo)致會員名重復(fù)檢測失敗，不過這次出現(xiàn)問題的是Validation插件的remote驗證。
2010-07-07
jQuery插件EnPlaceholder實現(xiàn)輸入框提示文字
EnPlaceholder插件支持密碼框哦！實際對比同類的placeholder插件在ie等瀏覽器下效果要好很多！下面我們來具體探討下此插件的使用方法吧。
2015-06-06
jQuery實現(xiàn)簡單的Ajax調(diào)用功能示例
這篇文章主要介紹了jQuery實現(xiàn)簡單的Ajax調(diào)用功能,結(jié)合實例形式分析了jQuery的$.ajax方法與后臺php交互實現(xiàn)ajax調(diào)用功能相關(guān)操作技巧,需要的朋友可以參考下
2019-02-02
jQuery循環(huán)遍歷子節(jié)點并獲取值的方法
這篇文章主要介紹了jQuery循環(huán)遍歷子節(jié)點并獲取值的方法,涉及jQuery節(jié)點的遍歷與屬性操作相關(guān)技巧,需要的朋友可以參考下
2016-04-04
jquery ajax執(zhí)行后臺方法
jquery ajax調(diào)用動態(tài)網(wǎng)頁內(nèi)容的方法，其實下面的這個例子很簡單的返回數(shù)據(jù)。
2010-03-03
jqGrid jQuery 表格插件測試代碼
在逛博客中無意中看到這個插件，一下就吸引住了我，于是就自己在網(wǎng)上找了些資料實踐了一下
2011-08-08
jquery中one()方法的用法實例
這篇文章主要介紹了jquery中one()方法的用法,實例分析了one()方法的功能及使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-01-01
jQuery創(chuàng)建平滑的頁面滾動(頂部或底部)
如何創(chuàng)建一個平滑的滾動效果是本文的目的使用jQuery讓您可以滾動到你的網(wǎng)頁的頂部或底部,相當(dāng)不錯的一個效果，感興趣的你可不要錯過了哈
2013-02-02
基于jQuery ligerUI實現(xiàn)分頁樣式
這篇文章主要為大家詳細(xì)介紹了基于jQuery ligerUI實現(xiàn)分頁樣式,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-09-09
jQuery中[attribute*=value]選擇器用法實例
這篇文章主要介紹了jQuery中[attribute*=value]選擇器用法,實例分析了[attribute*=value]選擇器的功能、定義及匹配給定的屬性包含某些值的元素的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2014-12-12