a标签 href onclick调用函数的问题_html/css_WEB-ITnose-html教程-PHP中文网

回复讨论(解决方案)

首页

web前端

html教程

a标签 href onclick调用函数的问题_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:47 AM

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

登录后复制

回复讨论(解决方案)

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

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

手机 - 商品筛选

网络：移动4G（TD-LTE ）联通4G（TD-LTE）联通3G（WCDMA）

更多选项+

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

手机 - 商品筛选

网络：移动4G（TD-LTE ）联通4G（TD-LTE）联通3G（WCDMA）

更多选项+

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

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7318

Java教程

1625

CakePHP 教程

1349

Laravel 教程

1261

PHP教程

1209

显示更多

Related knowledge

公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？ Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存，这玩意儿，说简单也简单，说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章，结果用户打开还是老版本，这滋味，谁受得了？这篇文章，咱就来扒一扒这背后的弯弯绕绕，以及如何优雅地解决这个问题。读完之后，你就能轻松应对各种缓存难题，让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存，说白了就是浏览器或者服务器为了提高访问速度，把一些静态资源（比如图片、CSS、JS）或者页面内容存储起来。下次访问时，直接从缓存里取，不用再重新下载，速度自然快。但这玩意儿，也是个双刃剑。新版本上线，