如果使用 JavaScript 锚点 href 属性为空，如何隐藏 span 元素？

任务是在标签的 href 属性不存在或无效时隐藏 标签。

让我们考虑在标签内有 标签。它看起来类似于：

现在我们将 id 添加到元素以识别它们。

现在，当 标签的“href”属性为空或无效时，我们必须隐藏 标签。

方法：

• 第一种情况是 href 为空时。所以我们只需要检查可以使用 vanilla JavaScript 完成的空 href。
• 在第二种情况下，href 指向一个文件/位置。我们需要检查它是否是有效的文件/位置。现在在这种情况下，当存在 href 时，我们检查它是否指向某个有效的文件或位置。我们将使用 jQuery Ajax 调用来完成。 jQuery Ajax 调用可用于在后台与 Web 服务器交换数据。如果它返回错误，则文件的位置无效。

示例 1：以下代码显示 href 为空的情况。

HTML

  

    
        this is link
    
  
    
        if(document.getElementById("inner")
                    .getAttribute("href")=="") {
            document.getElementById("outer")
                      .style.display = "none";
            alert("File does not exist");
        }
    

  

---

输出：

示例 2：以下代码是 href 指向某个位置的示例。

HTML

  

    
    

  

    
        
            this is link
        
    
  
    
        // Function to check if url is
        // valid by making Ajax call
        function doesFileExist(url) {
            $.ajax({
                headers:{    
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Access-Control-Allow-Origin': '*' 
                },
                method:'HEAD',
                url:url,
                success:function(){
                    alert("File exists!")
                },
                error:function(){
                    // Hiding the outer span tag
                    $("#outer").hide() 
                    alert("File does not exists!")
                },
            })
        }
  
        // Storing the location href is pointing to
        url=$("#inner").attr("href") 
        doesFileExist(url)
    

  

输出：