ASP.NET jQuery 食谱10 (动态修改hyperlink的UR

系统 2466 0

这节我们来看下如何实现通过选择RadioButtonList值动态改变hyperlink控件的URL值,并简要介绍bind和live方法的区别。

1.先准备界面代码:

      
        <
      
      
        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 >
更新网址: </ 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 ="网易" 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转换成<table/>,其成员转换为<input type="radio"/>,下面是实现改变URL值的脚本代码:

 

      
        <
      
      
        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.实现界面效果:

 

ASP.NET jQuery 食谱10 (动态修改hyperlink的URL值)_第1张图片

4.另外我们可以通过下面的代码实现绑定change事件:

$("input=[type=radio]").live("change", function(){

  $("a").attr("href", $(this).val());

});

5.live()和bind()函数的区别:

live()函数可以附加事件到现在的和将来的页面元素上。然而,bind()函数只能把事件附加到已经加载过的页面元素上。

也就是说bind()适合页面静态元素而live()适合页面静态和动态元素。

 





ASP.NET jQuery 食谱10 (动态修改hyperlink的URL值)


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论