设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 自定义标签如果和内置标签重名不会有效果
返回列表 发新帖
查看: 231|回复: 9

[已解决]自定义标签如果和内置标签重名不会有效果

[复制链接]
Sorawithcat
发表于 2024-1-22 12:22:10 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
比如这样设置的a标签他会提示：链接必须具有可识别的文本:元素没有标题属性影响资源

html
  1.     <div id="a" class="efsef">
  2.         <div class="1"></div>
  3.         <div class="2"></div>
  4.         <div class="3"></div>
  5.         <div class="4"></div>
  6.     </div>
复制代码

body
  1. changeTagById("a", "a", "网站名")
复制代码

js
  1. /**
  2. * 修改指定id的标签
  3. * @param {any} idname - 指定id
  4. * @param {any} tagname - 修改的标签名，默认为"div"
  5. * @param {any} adds - 如果是a标签或者img标签，需要填入路径，默认为"#"
  6. */
  7. function changeTagById(idname, tagname = "div", adds = "#") {
  8.     let idnames = document.getElementById(`${idname}`)
  9.     let tagnames = document.createElement(`${tagname}`)

  11.     if (idnames) {
  12.         tagnames.setAttribute("id", idname + "1")
  13.         let idnamesss = idname + "1"
  14.         tagnames.setAttribute("class", idnames.className)
  15.         idnames.after(tagnames)
  16.         let newidname = document.getElementById(`${idnamesss}`)
  17.         let lenthsss = idnames.children.length
  18.         for (let i = 0; i < lenthsss; i++) {
  19.             newidname.append(idnames.children[0])
  20.         }
  21.         newidname.setAttribute("id", idname)
  22.         idnames.remove()
  23.         //newidname.setAttribute("is", `${tagname}`)
  24.         if (tagname == "a") {
  25.             newidname.setAttribute("href", adds)
  26.         }

  28.         return true
  29.     } else {
  30.         checkid(`${idname}`)
  31.         return false
  32.     }
  33. }
复制代码
最佳答案
月排行榜 / 总排行榜
FishC
2024-1-22 12:22:32
您好，自定义标签是一种扩展HTML元素的方式，可以用来创建自己的标签。然而，如果您使用了与内置标签相同的名称，浏览器将会忽略您的自定义标签。因此，在上述代码中，如果您将标签名设置为"a"，则不会生效。

要解决这个问题，您可以选择修改自定义标签的名称，或者使用某种形式的标记来标识您的自定义标签。以下是修改自定义标签名称的示例代码：

  1. <!DOCTYPE html>
  2. <html>

  4. <body>
  5.   <mytag id="myTag">自定义标签</mytag>

  7.   <script>
  8.     function changeTagById(idname, tagname = "div", adds = "#") {
  9.       let idnames = document.getElementById(idname);

  11.       if (idnames) {
  12.         let tagnames = document.createElement(tagname);
  13.         tagnames.setAttribute("id", idname + "1");
  14.         tagnames.setAttribute("class", idnames.className);
  15.         idnames.after(tagnames);

  17.         let newidname = document.getElementById(idname + "1");
  18.         let childrenCount = idnames.children.length;

  20.         for (let i = 0; i < childrenCount; i++) {
  21.           newidname.append(idnames.children);
  22.         }

  24.         newidname.setAttribute("id", idname);
  25.         idnames.remove();

  27.         if (tagname == "mytag") {
  28.           newidname.textContent = document.getElementById(idname).textContent;
  29.         }

  31.         return true;
  32.       } else {
  33.         checkid(idname);
  34.         return false;
  35.       }
  36.     }

  38.     changeTagById("myTag", "mytag");
  39.   </script>
  40. </body>

  42. </html>
复制代码


在以上示例中，我们将自定义标签的名称从"a"改为"mytag"，并将JavaScript代码中的相关部分进行了相应的修改。

希望这可以帮助到您！如果您有任何其他问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

FishC
发表于 2024-1-22 12:22:32 | 显示全部楼层    本楼为最佳答案   
您好，自定义标签是一种扩展HTML元素的方式，可以用来创建自己的标签。然而，如果您使用了与内置标签相同的名称，浏览器将会忽略您的自定义标签。因此，在上述代码中，如果您将标签名设置为"a"，则不会生效。

要解决这个问题，您可以选择修改自定义标签的名称，或者使用某种形式的标记来标识您的自定义标签。以下是修改自定义标签名称的示例代码：

  1. <!DOCTYPE html>
  2. <html>

  4. <body>
  5.   <mytag id="myTag">自定义标签</mytag>

  7.   <script>
  8.     function changeTagById(idname, tagname = "div", adds = "#") {
  9.       let idnames = document.getElementById(idname);

  11.       if (idnames) {
  12.         let tagnames = document.createElement(tagname);
  13.         tagnames.setAttribute("id", idname + "1");
  14.         tagnames.setAttribute("class", idnames.className);
  15.         idnames.after(tagnames);

  17.         let newidname = document.getElementById(idname + "1");
  18.         let childrenCount = idnames.children.length;

  20.         for (let i = 0; i < childrenCount; i++) {
  21.           newidname.append(idnames.children);
  22.         }

  24.         newidname.setAttribute("id", idname);
  25.         idnames.remove();

  27.         if (tagname == "mytag") {
  28.           newidname.textContent = document.getElementById(idname).textContent;
  29.         }

  31.         return true;
  32.       } else {
  33.         checkid(idname);
  34.         return false;
  35.       }
  36.     }

  38.     changeTagById("myTag", "mytag");
  39.   </script>
  40. </body>

  42. </html>
复制代码


在以上示例中，我们将自定义标签的名称从"a"改为"mytag"，并将JavaScript代码中的相关部分进行了相应的修改。

希望这可以帮助到您！如果您有任何其他问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

Sorawithcat
 楼主| 发表于 2024-1-22 12:24:44 | 显示全部楼层
FishC 发表于 2024-1-22 12:22
您好，自定义标签是一种扩展HTML元素的方式，可以用来创建自己的标签。然而，如果您使用了与内置标签相同的 ...

我需要的是如果自定义的标签是a，怎么让他有a标签的功能
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

FishC
发表于 2024-1-22 12:25:35 | 显示全部楼层
Sorawithcat 发表于 2024-01-22 12:24
我需要的是如果自定义的标签是a，怎么让他有a标签的功 ...


对不起，我误解了您的问题。如果您想要自定义的标签具有类似于"a"标签的功能，您可以使用`document.createElement()`方法创建一个自定义标签，然后为该标签设置必要的属性和事件处理程序。以下是一个示例代码：

  1. // 创建自定义标签
  2. let customLink = document.createElement('a');

  4. // 设置自定义标签的属性
  5. customLink.setAttribute('href', '#');
  6. customLink.innerHTML = '点击我';

  8. // 添加事件处理程序
  9. customLink.addEventListener('click', function() {
  10.     alert('这是一个自定义链接！');
  11. });

  13. // 将自定义标签添加到页面中
  14. document.body.appendChild(customLink);
复制代码


在上述示例中，我们使用`document.createElement('a')`方法创建了一个自定义标签，并使用`setAttribute()`方法为其设置了`href`属性和`innerHTML`内容。然后，我们使用`addEventListener()`方法为自定义链接添加了点击事件处理程序。最后，使用`appendChild()`方法将自定义链接添加到页面的`<body>`元素中。

现在，您可以自定义`<a>`标签的功能，而不会与浏览器内置的`<a>`标签冲突。希望这对您有所帮助！如有任何其他问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

Sorawithcat
 楼主| 发表于 2024-1-22 12:29:04 | 显示全部楼层
FishC 发表于 2024-1-22 12:25
对不起，我误解了您的问题。如果您想要自定义的标签具有类似于"a"标签的功能，您可以使用`document.cre ...

a标签的属性和事件处理程序是什么
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

FishC
发表于 2024-1-22 12:29:26 | 显示全部楼层
Sorawithcat 发表于 2024-01-22 12:29
a标签的属性和事件处理程序是什么


非常抱歉给您带来困惑。对于`<a>`标签，可以设置以下属性和事件处理程序：

属性：
- `href`: 设置链接的目标URL，例如：`<a href="https://www.example.com">链接文本</a>`
- `target`: 指定链接在何处打开，例如：`<a href="https://www.example.com" target="_blank">链接文本</a>`

事件处理程序：
- `click`：当用户点击链接时触发的事件，可使用JavaScript编写相应的处理函数。

下面是一个示例代码，展示如何使用属性和事件处理程序来创建和操作a标签：
  1. // 创建 a 标签
  2. let link = document.createElement('a');

  4. // 设置属性
  5. link.href = "https://www.example.com";
  6. link.target = "_blank";

  8. // 设置文本内容
  9. link.textContent = "点击我";

  11. // 添加点击事件处理程序
  12. link.addEventListener("click", function(event) {
  13.   event.preventDefault(); // 阻止默认行为，避免跳转到链接目标页面
  14.   alert("你点击了链接！");
  15. });

  17. // 将 a 标签添加到页面中
  18. document.body.appendChild(link);
复制代码


这样，您就可以创建一个具有类似`<a>`标签的自定义标签，并为其设置属性和事件处理程序。希望这次能够满足您的需求。如果您还有其他问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

Sorawithcat
 楼主| 发表于 2024-1-22 12:32:28 | 显示全部楼层
FishC 发表于 2024-1-22 12:29
非常抱歉给您带来困惑。对于``标签，可以设置以下属性和事件处理程序：

属性：

有办法让某个标签和a标签的功能相同吗
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

FishC
发表于 2024-1-22 12:32:56 | 显示全部楼层
Sorawithcat 发表于 2024-01-22 12:32
有办法让某个标签和a标签的功能相同吗


是的，您可以通过设置自定义标签的属性和事件处理程序，使其具有类似``标签的功能。以下是一个示例代码，演示如何创建一个自定义标签，并使其具有类似``标签的功能：HTML：  点击我  JavaScript：  // 创建自定义标签let customLink = document.createElement('custom-link');// 设置属性customLink.setAttribute("href", "https://www.example.com");// 设置文本内容customLink.textContent = "点击我";// 添加点击事件处理程序customLink.addEventListener("click", function(event) {  event.preventDefault(); // 阻止默认行为，避免跳转到链接目标页面  alert("你点击了链接！");});// 将自定义标签添加到页面中document.body.appendChild(customLink);在这个示例中，我们创建了一个名为`custom-link`的自定义标签，并为其设置了类似于`a`标签的属性和事件处理程序。当用户点击`custom-link`时，将弹出一个警告框，而不会导航到指定的URL。希望这可以满足您的需求！如果您还有其他问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

Sorawithcat
 楼主| 发表于 2024-1-22 12:36:50 | 显示全部楼层
FishC 发表于 2024-1-22 12:32
是的，您可以通过设置自定义标签的属性和事件处理程序，使其具有类似``标签的功能。以下是一个示例代码 ...

通过createElement创建的a标签为什么没有a标签的效果
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

FishC
发表于 2024-1-22 12:37:14 | 显示全部楼层
Sorawithcat 发表于 2024-01-22 12:36
通过createElement创建的a标签为什么没有a标签的效果


抱歉，我之前的回答有误。使用createElement创建的元素只是一个普通的HTML元素，它没有内置的a标签的功能，无法实现点击后跳转到指定链接的功能。

要实现a标签的效果，您可以使用document.createElement创建一个带有`<a>`标签的元素，并设置它的href属性和innerHTML属性来指定链接和显示的文本。然后，使用appendChild将该元素添加到DOM树中。

以下是示例代码：

  1. // 创建a标签
  2. let link = document.createElement("a");

  4. // 设置属性
  5. link.setAttribute("href", "https://www.example.com");
  6. link.innerHTML = "点击我";

  8. // 添加到页面中
  9. document.body.appendChild(link);
复制代码


通过这种方法创建的a标签将具有a标签的功能，用户点击时会跳转到指定的链接。

希望这次的解答能够帮到您，如果您还有任何问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-5-1 19:47

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表