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();方法，所以，它是很快的显示又隐藏了

其实这个不不用写成两个方法，你就写一个方法，然后方法内判断元素是显示还是隐藏就可以了
以下是我给你提供的代码：
<script> function showdiv(info) { var $e = $("#hpn"); if (!$e.is(":visible")) { $e.show(); $("#" + info).html("收起-"); }else { $e.hide(); $("#" + info).html("更多选项+"); } } </script>

手机 - 商品筛选

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

价格： 5000以上 4000-4999 3000-3999 2000-2999

特点： JDPhone计划 "0"元购机防水长待机 1080P全高清屏

更多选项+

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

手机 - 商品筛选

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

价格： 5000以上 4000-4999 3000-3999 2000-2999

特点： JDPhone计划 "0"元购机防水长待机 1080P全高清屏

更多选项+

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

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract