Problem with a tag href onclick calling function_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:47:38
Original
1423 people have browsed it

<!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>
Copy after login

上面这样调用可以执行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>
Copy after login


回复讨论(解决方案)

第二种:
你在点击的时候,给a标签的href添加了URL了,然后就执行了hidediv();方法,所以,它是很快的显示又隐藏了

其实这个不不用写成两个方法,你就写一个方法,然后方法内判断元素是显示还是隐藏就可以了
以下是我给你提供的代码:





添加了没有用啊..= =这真不是特别懂..

第二种:
你在点击的时候,给a标签的href添加了URL了,然后就执行了hidediv();方法,所以,它是很快的显示又隐藏了

其实这个不不用写成两个方法,你就写一个方法,然后方法内判断元素是显示还是隐藏就可以了
以下是我给你提供的代码:




谢谢,感谢方法,但我主要还是不懂那个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>
Copy after login

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!