如何使用jquery切换2个链接（标记）？

Question

I'm trying to toggle 2 links (link1 and link2). 我正在尝试切换2个链接（link1和link2）。

click link1 and it disables itself and enable link2 and vice-versa. 单击link1，它会禁用自身并启用link2，反之亦然。

I got 2 issues: 我有2个问题：

link1 can still be clicked after clicking it. 单击link1后仍可以单击它。 Same for link2. 链接2相同。
on the 4 lines that has $("body"), I'm getting an error in the console. 在具有$（“ body”）的4行中，控制台出现错误。 something about "TypeError: (intermediate value).apply is not a function" and it's pointing to a line in jquery.js 关于“ TypeError ：（中间值）.apply不是函数”的内容，它指向jquery.js中的一行

Any ideas what I am doing wrong? 有什么想法我做错了吗？

Thanks 谢谢

<html
<head>
    <script src="http://code.jquery.com/jquery-1.12.4.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
        setToggle("domestic");

        $('[id^="toggle_"]').on( "click", function() {
            var domInt = $(this).attr("id").replace("toggle_", "").toString();

            setToggle(domInt);
        });

        function setToggle(domInt) {
            domInt = domInt.toUpperCase();

            $("#clicked").append("domInt: " + domInt.toUpperCase() + " | ");
            if (domInt == "DOMESTIC") {
                $("body").off("click", "#toggle_domestic");
                $("body").on("click", "#toggle_international");

                $("#clicked").append("clicked domestic<br>");
            } else if (domInt == "INTERNATIONAL") {
                $("body").on("click", "#toggle_domestic");
                $("body").off("click", "#toggle_international");

                $("#clicked").append("clicked international<br>");
            }
        }
    });
   </script>
</head>
<body>
    <p><a href="javascript:void(0)" id="toggle_domestic">Domestic</a> | <a href="javascript:void(0)" id="toggle_international">International</a></p>
    <div id="clicked"></div>
</body>
</html

Answer 1

$("body").on("click", "#toggle_domestic")/$("body").off("click", "#toggle_international");

is not actually disabling the link.You can disable a link using css properties or by returning false . 实际上并没有禁用链接。您可以使用css属性或通过返回false来禁用链接。

var domInt = $(this).attr("id").replace("toggle_", "").toString(); var domInt = $（this）.attr（“ id”）。replace（“ toggle_”，“”）.toString（）; can be replaced by $(this).text().trim() if the requirement is to get the text 如果需要获取文本，可以用$(this).text().trim()替换

In this case use a common class( anchorTag ) which target all the desired anchor tags. 在这种情况下，请使用面向所有所需锚标签的通用类（ anchorTag ）。 So on click of an anchor tag remove the notActive css class from all anchor tags and then this nonActive to the clicked anchor tag. 因此，在单击锚标记后，从所有锚标记中删除notActive css类，然后将此非nonActive标记为单击的锚标记。

 $(document).ready(function() { setToggle("domestic"); $('.anchorTag').on("click", function() { $('.anchorTag').removeClass('notActive'); $(this).addClass('notActive') var domInt = $(this).text().trim(); setToggle(domInt); }); function setToggle(domInt) { domInt = domInt.toUpperCase(); $("#clicked").append("domInt: " + domInt.toUpperCase() + " | "); if (domInt == "DOMESTIC") { $("#clicked").append("clicked domestic<br>"); } else if (domInt == "INTERNATIONAL") { $("#clicked").append("clicked international<br>"); } } });

 .notActive { pointer-events: none; cursor: no-drop; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p><a href="javascript:void(0)" class="anchorTag" id="toggle_domestic">Domestic</a> | <a href="javascript:void(0)" class="anchorTag" id="toggle_international">International</a> </p> <div id="clicked"></div>

如何使用jquery切换2个链接（标记）？

问题描述

1 个解决方案

解决方案1
0 2018-02-15 05:00:00

如何使用jquery切换2个链接（标记）？

问题描述

1 个解决方案

解决方案1 0 2018-02-15 05:00:00

解决方案1
0 2018-02-15 05:00:00