ASP.NET jQuery 实例10 动态修改hyperlink的URL值

 更新时间:2012年02月03日 17:01:33   作者:   我要评论
这节我们来看下如何实现通过选择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=""></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.实现界面效果:

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

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

5.live()和bind()函数的区别:
live()函数可以附加事件到现在的和将来的页面元素上。然而,bind()函数只能把事件附加到已经加载过的页面元素上。
也就是说bind()适合页面静态元素而live()适合页面静态和动态元素。

相关文章

  • jQuery EasyUI Tab 选项卡问题小结

    jQuery EasyUI Tab 选项卡问题小结

    这篇文章主要介绍了jQuery EasyUI Tab 选项卡问题小结,在项目开发阶段很多朋友都遇到过此问题,其实解决办法很简单的,下面小编给大家分享下问题原因及解决办法,需要的朋友可以参考下
    2016-08-08
  • jquery实现Ctrl+Enter提交表单的方法

    jquery实现Ctrl+Enter提交表单的方法

    这篇文章主要介绍了jquery实现Ctrl+Enter提交表单的方法,涉及jquery针对键盘按键的响应与表单操作相关技巧,非常简单实用,需要的朋友可以参考下
    2015-07-07
  • jQuery插件bxSlider实现响应式焦点图

    jQuery插件bxSlider实现响应式焦点图

    bxSlider特性1.充分响应各种设备,适应各种屏幕;2.支持多种滑动模式,水平、垂直以及淡入淡出效果;3.支持图片、视频以及任意html内容;4.支持触摸滑动;5.支持Firefox,Chrome,Safari,iOS,Android,IE7+,下面我们就来详细探讨下吧。
    2015-04-04
  • 一些实用的jQuery代码片段收集

    一些实用的jQuery代码片段收集

    今天总结一下学习jQuery时中遇到的一些常用的jQuery代码,这些代码片段可能在我们急需的时候能起到帮助。
    2011-07-07
  • 对象不支持indexOf属性或方法的解决方法(必看)

    对象不支持indexOf属性或方法的解决方法(必看)

    下面小编就为大家带来一篇对象不支持indexOf属性或方法的解决方法(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 传递参数的标准方法(jQuery.ajax)

    传递参数的标准方法(jQuery.ajax)

    jQuery.ajax传递参数的方法
    2008-11-11
  • jQuery插件scroll实现无缝滚动效果

    jQuery插件scroll实现无缝滚动效果

    今天给大家分享一款页面无缝滚动的jquery.scroll插件。 支持上下左右,淡入淡出,滚动时间设置,动画时间设置,鼠标经过是否停止设置,滚动鼠标液动条看下页面的切换效果。该插件适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。
    2015-04-04
  • Jquery 表单验证类介绍与实例

    Jquery 表单验证类介绍与实例

    Jquery 表单验证类介绍与实例,需要的朋友可以参考一下
    2013-06-06
  • jQuery中:last选择器用法实例

    jQuery中:last选择器用法实例

    这篇文章主要介绍了jQuery中:last选择器用法,实例分析了:last选择器的功能、定义及匹配时的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • IE下使用jQuery重置iframe地址时内存泄露问题解决办法

    IE下使用jQuery重置iframe地址时内存泄露问题解决办法

    这篇文章主要介绍了IE下使用jQuery重置iframe地址时内存泄露问题解决办法,需要的朋友可以参考下
    2015-02-02

最新评论