a标签 href onclick调用函数的问题

yangzj1992 2015-03-20 03:29:16

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

...全文

3862 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

孟子E章 2015-03-22

打赏
举报

这样

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

yangzj1992 2015-03-21

打赏
举报

引用 2 楼 Love_yl 的回复:

第二种：你在点击的时候，给a标签的href添加了URL了，然后就执行了hidediv();方法，所以，它是很快的显示又隐藏了其实这个不不用写成两个方法，你就写一个方法，然后方法内判断元素是显示还是隐藏就可以了以下是我给你提供的代码： <script type="text/javascript"> function showdiv(info) { var $e = $("#hpn"); if (!$e.is(":visible")) { $e.show(); $("#" + info).html("收起-"); }else { $e.hide(); $("#" + info).html("更多选项+"); } } </script> <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 class="btn-slide" onclick="showdiv(this)">更多选项+</a> </p> </div> </body>

谢谢，感谢方法，但我主要还是不懂那个onclick事件怎么修改才能正确显示..

yangzj1992 2015-03-21

打赏
举报

引用 1 楼 ohmygirl 的回复:

<a href="#" . 所以默认会刷新当前页面的，如果不想刷新页面，应该在函数的末尾添加 return false;

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

神经质女孩 2015-03-20

打赏
举报

第二种：你在点击的时候，给a标签的href添加了URL了，然后就执行了hidediv();方法，所以，它是很快的显示又隐藏了其实这个不不用写成两个方法，你就写一个方法，然后方法内判断元素是显示还是隐藏就可以了以下是我给你提供的代码： <script type="text/javascript"> function showdiv(info) { var $e = $("#hpn"); if (!$e.is(":visible")) { $e.show(); $("#" + info).html("收起-"); }else { $e.hide(); $("#" + info).html("更多选项+"); } } </script> <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 class="btn-slide" onclick="showdiv(this)">更多选项+</a> </p> </div> </body>