Home > Article > Web Front-end > Problem with a tag href onclick calling function_html/css_WEB-ITnose
Problem with a tag href onclick calling function_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:47:381426browse
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body { margin: 0 auto; padding: 0; } a:focus { outline: none; } #pn { background: #e8e8e8; width: 600px; display: block; margin: 0 auto; padding: 5px; font-size: 9pt; height: auto; } .slide { margin: 0; padding: 0; width: 600px; border-top: solid 4px gray; margin: 0 auto; } .btn-slide { background: gray; text-align: center; width: 120px; height: 30px; padding: 10px 10px 0 0; margin: 0 auto; display: block; color: #fff; text-decoration: none; } </style> <script type="text/javascript"> function showdiv() { document.getElementById("hpn").style.display = "block"; // document.getElementById("pn").style.height='80px'; document.getElementById("strHref").href = "javascript:hidediv();"; document.getElementById("strHref").innerHTML = "收起-"; } function hidediv() { document.getElementById("hpn").style.display = "none"; // document.getElementById("pn").style.height='60px'; document.getElementById("strHref").href = "javascript:showdiv();"; document.getElementById("strHref").innerHTML = "更多选项+"; } </script></head><body> <div> <div id="pn"> <p> 手机 - 商品筛选</p> <p> 网络： 移动4G（TD-LTE ） 联通4G（TD-LTE） 联通3G（WCDMA） </p> <div id="hpn" style="display: none"> <p> 价格： 5000以上 4000-4999 3000-3999 2000-2999 </p> <p> 特点： JDPhone计划 "0"元购机 防水 长待机 1080P全高清屏 </p> </div> </div> <p class="slide"> <a href="javascript:showdiv();" id="strHref" class="btn-slide">更多选项+</a></p> </div></body></html> 上面这样调用可以执行showdiv()
但是用onclick如下就不能执行，这是为什么呢？求解.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body { margin: 0 auto; padding: 0; } a:focus { outline: none; } #pn { background: #e8e8e8; width: 600px; display: block; margin: 0 auto; padding: 5px; font-size: 9pt; height: auto; } .slide { margin: 0; padding: 0; width: 600px; border-top: solid 4px gray; margin: 0 auto; } .btn-slide { background: gray; text-align: center; width: 120px; height: 30px; padding: 10px 10px 0 0; margin: 0 auto; display: block; color: #fff; text-decoration: none; } </style> <script type="text/javascript"> function showdiv() { document.getElementById("hpn").style.display = "block"; // document.getElementById("pn").style.height='80px'; document.getElementById("strHref").href = "javascript:hidediv();"; document.getElementById("strHref").innerHTML = "收起-"; } function hidediv() { document.getElementById("hpn").style.display = "none"; // document.getElementById("pn").style.height='60px'; document.getElementById("strHref").href = "javascript:showdiv();"; document.getElementById("strHref").innerHTML = "更多选项+"; } </script></head><body> <div> <div id="pn"> <p> 手机 - 商品筛选</p> <p> 网络： 移动4G（TD-LTE ） 联通4G（TD-LTE） 联通3G（WCDMA） </p> <div id="hpn" style="display: none"> <p> 价格： 5000以上 4000-4999 3000-3999 2000-2999 </p> <p> 特点： JDPhone计划 "0"元购机 防水 长待机 1080P全高清屏 </p> </div> </div> <p class="slide"> <a href="#" id="strHref" class="btn-slide" onclick="showdiv()">更多选项+</a></p> </div></body></html>
回复讨论(解决方案)
060ce335a20d87f95a9667a1aeeb202b
function showdiv(info) {
var $e = $("#hpn");
if (!$e.is(":visible")) {
$e.show();
$("#" + info).html("收起-");
}else {
$e.hide();
$("#" + info).html("更多选项+");
}
}
2cacc6d41bbb37262a98f745aa00fbf0
6c04bd5ca3fcae76e30b72ad730ca86d
dc6dce4a544fdca2df29d5ac0ea9906b
367df27cab68f2f016e84595dab3c3a4
e388a4556c0f65e1904146cc1a846bee
手机 - 商品筛选
94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee
网络： 移动4G（TD-LTE ） 联通4G（TD-LTE） 联通3G（WCDMA）
94b3e26ee717c64999d7867364b1b4a3
23a53986e4559d2bef8cdc24b925ee91
e388a4556c0f65e1904146cc1a846bee
价格： 5000以上 4000-4999 3000-3999 2000-2999
94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee
特点： JDPhone计划 "0"元购机 防水 长待机 1080P全高清屏
94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
cb32f8ede5e289caf4da988fa9a09e88
d6ef11867921b37fcc43979af8570108更多选项+5db79b134e9f6b82c0b36e0489ee08ed
94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
10e9e21d26bb5a7de952eb93c1317338
function showdiv(info) {
var $e = $("#hpn");
if (!$e.is(":visible")) {
$e.show();
$("#" + info).html("收起-");
}else {
$e.hide();
$("#" + info).html("更多选项+");
}
}
2cacc6d41bbb37262a98f745aa00fbf0
6c04bd5ca3fcae76e30b72ad730ca86d
dc6dce4a544fdca2df29d5ac0ea9906b
367df27cab68f2f016e84595dab3c3a4
e388a4556c0f65e1904146cc1a846bee
手机 - 商品筛选
94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee
网络： 移动4G（TD-LTE ） 联通4G（TD-LTE） 联通3G（WCDMA）
94b3e26ee717c64999d7867364b1b4a3
23a53986e4559d2bef8cdc24b925ee91
e388a4556c0f65e1904146cc1a846bee
价格： 5000以上 4000-4999 3000-3999 2000-2999
94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee
特点： JDPhone计划 "0"元购机 防水 长待机 1080P全高清屏
94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
cb32f8ede5e289caf4da988fa9a09e88
d6ef11867921b37fcc43979af8570108更多选项+5db79b134e9f6b82c0b36e0489ee08ed
94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
谢谢，感谢方法，但我主要还是不懂那个onclick事件怎么修改才能正确显示..
这样
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body { margin: 0 auto; padding: 0; } a:focus { outline: none; } #pn { background: #e8e8e8; width: 600px; display: block; margin: 0 auto; padding: 5px; font-size: 9pt; height: auto; } .slide { margin: 0; padding: 0; width: 600px; border-top: solid 4px gray; margin: 0 auto; } .btn-slide { background: gray; text-align: center; width: 120px; height: 30px; padding: 10px 10px 0 0; margin: 0 auto; display: block; color: #fff; text-decoration: none; } </style> <script type="text/javascript"> function showdiv() { document.getElementById("hpn").style.display = "block"; document.getElementById("strHref").innerHTML = "收起-"; document.getElementById("strHref").onclick=hidediv; } function hidediv() { document.getElementById("hpn").style.display = "none"; document.getElementById("strHref").innerHTML = "更多选项+"; document.getElementById("strHref").onclick=showdiv; } </script></head><body> <div> <div id="pn"> <p> 手机 - 商品筛选</p> <p> 网络： 移动4G（TD-LTE ） 联通4G（TD-LTE） 联通3G（WCDMA） </p> <div id="hpn" style="display: none"> <p> 价格： 5000以上 4000-4999 3000-3999 2000-2999 </p> <p> 特点： JDPhone计划 "0"元购机 防水 长待机 1080P全高清屏 </p> </div> </div> <p class="slide"> <a href="javascript:;" id="strHref" class="btn-slide" onclick="showdiv();return false">更多选项+</a></p> </div></body></html>