<script>
function changeHref(obj) {
var target = document.getElementById("aPay"); // 查找目标对象
target.href = "https://www.abc.com/ok.htm?pay=" + obj.value; // 修改A标签
}
</script>
<table>
<tr>
<td>
<input name="bay" type="checkbox" value="100" onclick="changeHref(this);">100元月卡
<input name="bay" type="checkbox" value="200" onclick="changeHref(this);">200元季卡
<input name="bay" type="checkbox" value="300" onclick="changeHref(this);">300元半年卡
<input name="bay" type="checkbox" value="400" onclick="changeHref(this);">400年卡
</td>
</tr>
<tr>
<td>
<a id="aPay" href="https://www.abc.com/ok.htm?Email=123@qq.com&sms=123&pay=100&title=付款100元,购买100元月卡" target="_blank">付款</a>
</td>
</tr>
</table>
复制代码
http://bbs.csdn.net/topics/390136192
方法2使用:
toggle()
<script language="javascript" type="text/javascript" src="jquery-1.7.2.js"></script>
<a herf="#">1111</a>
<div style="display:none">22222</div>
$(function (
$('a').click(function (){
$('div').toggle()
})
))
设置css中display:none
实际应用:{这种变化是双向的}
<script language="javascript">function change() {
$("#GLOBAL_HIDDEN").toggle(1000);
}
</script>
复制代码
另:
一次性的
<div id="GLOBAL_MORE">
<div class="panel-body">
<div class="form-group">
<label class="col-sm-12 control-label" style="text-align: left;margin-bottom: 10px;">
<input type="button" onclick="change()" class="btn btn-primary" value="填写更多信息">
</input>
</label>
</div>
</div>
</div>
<div id="GLOBAL_HIDDEN" style=" display:none">
<div class="panel-body">
<div class="form-group">
<label class="col-sm-12 control-label" style="text-align: left;margin-bottom: 10px; ">站长邮箱:</label>
<div class="col-sm-12">
<input type="text" name="zhanzhangyouxiang" class="form-control" data-trigger="hover" title="" placeholder="例:webmaster@52x2.com" style="" value="<?php echo $config['email']; ?>">
</div>
</div>
</div>
</div>
复制代码
上面有用的就两个标签:
<div id="GLOBAL_MORE">1111 </div>
<div id="GLOBAL_HIDDEN">222</div>
<script language="javascript">function change() {
$("#GLOBAL_HIDDEN").show(1000);
$("#GLOBAL_MORE").hide(1000);
}
</script>
复制代码
<ul >
<li><p class="p1"><span>张三</span><em>2014-1-21 17:36:52</em></p>
<p class="p2">你好,我是嘻嘻嘻,我想和你聊聊</p>
<p class='reply' >回复</p>
<div style="display:none;" id="reply">
开始隐藏,点击回复时显示
</div>
</li>
<li><p class="p1"><span>李四</span><em>2014-1-21 17:42:18</em></p>
<p class="p2">你好,你好你好霓虹啊</p>
<p class='reply'>回复</p>
<div style="display:none;" id="reply">
开始隐藏,点击回复时显示
</div>
<li><p class="p1"><span>QQ</span><em>2014-1-21 17:42:18</em></p>
<p class="p2">你好,你好你好啊</p>
<p class='reply'>回复</p>
<div style="display:none;" id="reply">
开始隐藏,点击回复时显示
</div>
</li>
</ul>
<script>
var ps = document.getElementsByTagName("p");
for(var i=0;i<ps.length;i++){
if(ps[i].className='reply'){
ps[i].onclick=function(){
this.nextSibling.style.display='';
}
}
}
</script>
复制代码
注意: this.nextSibling.style.display=’’;为隐藏的js
可用例文:http://www.jb51.net/article/43026.htm
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script language="javascript" type="text/javascript" src="jquery-1.7.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(1000);
$("#show").click(function(){
$("p").show(1000);
});
});
});
</script>
<p>
大家好,欢迎学习jquery
</p>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<a href="javascript:void(0)" onclick="change()" class="btn btn-primary">填写更多信息</a>
复制代码
注意:必须使用href="javascript:void(0)"和a标签搭配,否则苹果和手机部分会跳转而不会直接执行js函数。