Question

所以我的网站是使用一个名为Inksoft的公司软件构建的，这使得我很少以自定义的方式工作。所以我必须做很多变通办法。

页面顶部的标题目前只有两个链接。 “产品”和“设计工作室”。我的目标是在标题中添加“关于我们”链接和“买家指南”。

我无法使用Inksoft的后端向标题中添加新内容。所以我编写了一个解决方法来替换标题中现有DIV的内容来说出并链接到我希望它们去的位置。

唯一的问题是，响应式移动导航在实施时失去了功能。 As seen here on this test page.

测试页面在顶部标题中有关于我们，使用此代码添加：

  <div class="delete-style">
    <button type="button">DELETE</button>
  </div>

因此，简化的问题是：如何实现此代码而不会丢失导航栏的响应功能？

Answer 1

jQuery .html函数将替换目标元素中的HTML。如果您只想附加一个值，则可能需要.append元素。

此外，您不能将HTML设置为有效的html字符串。您可能只想摆脱字符串开头的<document.write="。其余的看起来很好看，只是粗略一瞥。

所以：

<script>
  $("#header-nav-designs").append('<li id="header-nav-studio"><a href="/LiveCustom/Stores/Page/1000023/About_Us"><font color="#000000">About Us</font></a></li>');
</script>

编辑：

再看一遍之后，好像您选择的$('#header-nav-designs')已经是<li>，这意味着您需要选择父<ul>列表或者您可以使用jquery .after函数代替。

<script>
  $("#header-nav-designs").after('<li id="header-nav-studio"><a href="/LiveCustom/Stores/Page/1000023/About_Us"><font color="#000000">About Us</font></a></li>');
</script>

正如上面其他人评论的那样，您在页面上收到错误消息。看起来好像你正在尝试获取一个标识为divID的元素并向其添加一些html，但是没有标识为divID的元素，所以你得到一个错误，说你由于对innerHTML of null的调用返回null（未找到元素），因此无法读取属性document.getElementById。

Answer 2

您的代码所引用的元素ID标头导航设计在第170行具有CSS样式：

#header-nav-designs {display:none;}

元素将被隐藏，页面将显示为元素不在那里。使用display:none;

如果我理解正确，您的代码选择器指向错误的元素ID。它应该指向$(".header-nav > ul")。在jQuery中不需要Document.write，你只需要提供一个有效的html字符串作为参数。

jQuery html函数擦除所有在元素内部准备好的html并将其替换为作为参数给出的html字符串。如果要添加更多html但不删除元素中已有的内容，则必须使用append。

$(".header-nav > ul").append('<li><a href="/link1"><font color="#000000">About Us</font></a></li>');
$(".header-nav > ul").append('<li><a href="/link2"><font color="#000000">Buyers Guide</font></a></li>');

JavaScript DIV编辑破坏了其他元素的功能

2 个答案: