如何使用 jquery 切换 2 个链接（一个标签）？答案

【问题标题】：How do I toggle 2 links (a tag) using jquery?如何使用 jquery 切换 2 个链接（一个标签）？
【发布时间】：2018-02-15 13:00:00
【问题描述】：

我正在尝试切换 2 个链接（链接 1 和链接 2）。

单击link1，它会禁用自身并启用link2，反之亦然。

我有 2 个问题：

链接1点击后仍然可以点击。与链接 2 相同。
在包含 $("body") 的 4 行中，我在控制台中遇到错误。关于“TypeError: (intermediate value).apply is not a function”的东西，它指向 jquery.js 中的一行

任何想法我做错了什么？

谢谢

jsfiddle link

<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

【问题讨论】：

Toggle Between two Divs的可能重复

标签： javascript jquery

【解决方案1】：

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

实际上并没有禁用链接。您可以使用css 属性或返回false 来禁用链接。

var domInt = $(this).attr("id").replace("toggle_", "").toString();如果需要获取文本，可以替换为$(this).text().trim()

在这种情况下，使用一个通用类 (anchorTag)，它针对所有所需的锚标记。因此，单击锚标记时，从所有锚标记中删除 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>

【讨论】：