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

WBOY
WBOYOriginal
2016-06-24 11:47:381441browse

<!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>

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn