JavaScript 和 CSS 网站导航栏

Question

有什么方法可以让一个导航栏在两个页面上使用，但两个页面上的链接不同？ 例如，如果它是关于动物的：第 1 页 = 狗，第 2 页 = 猫。 两者都有一个导航栏项目，由“食品商店”、“美容”和“关于”组成。 我希望一个食品商店链接到www.DogsFood.com用于在狗页面上，另一个食品商店链接到www.CatFood.com用于猫。 如果您有任何关于如何 go 的资源，将不胜感激！ 谢谢！

Answer 1

一种方法是使用 Angular 中的可重用组件。 我认为这不是您所期望的答案（如果您正在做一个分级项目，也许您的老师会强迫您使用 javascript）。 但是我强烈推荐你学习Angular，虽然一开始有点难懂，但是它解决了用Javascript开发时发现的所有问题。

另一种方法是在加载时通过 javascript 加载 HTML，这是不好的做法，并在 ZC1841AB50748C16 的参数中设置 url 变量

Answer 2

是的，这绝对是可能的，而且好消息是有很多不同的方法可以实现这样的设置！

我实现这种导航栏的首选方法是在服务器端提供正确的链接，以便最终用户的浏览器实际从您的服务器接收的代码已经包含完整的导航栏，其中包含正确的链接。 这可以使用一些 PHP 或 Node.js 相对容易地实现，具体取决于您的服务器设置。 如果您有兴趣走这条路线，我很乐意深入研究如何在服务器端执行此操作，但是因为您询问了如何使用 JavaScript 执行此操作（我认为您的意思是前端 JS） ，我现在将在我的回答中解释第二种非服务器端方法。

为了使用所有前端 JavaScript 来实现这一点，我看到了两个主要方向，我们可以从这里 go。 我很快就会解释这两个。 首先，我们需要使用 JavaScript 从 URL 中获取当前页面的路径。 我们可以使用这段代码来做到这一点（解释如下）：

const pageName = window.location.pathname.slice(1).split("/")[0];

我们检索当前页面的路径。 对于此示例，我使用.slice(1)从 URL 路径 window.location.pathname（在域之后）中删除起始斜杠字符（“/”）。 这将用于两个示例。 从这里开始，我将 URL 路径字符串拆分为不同的数组值，方法是使用.split("/")将字符串拆分到另一个斜杠字符出现的任何地方。 现在，我们使用[0]从该数组中获取第一个值，该值将等于页面 URL 中域之后路径中的第一个目录。 此方法适用于该页面以及同一目录下的任何子页面（例如/path-1/ ， /path-1/path-1-subpath/ ）

1.如果/否则方法

第一种也是更简单的方法是使用我们在上面提取的值检查当前页面的 URL 路径，然后为您希望为该页面显示的任何导航项注入 HTML 代码。

 const pageName = window.location.pathname.slice(1).split("/")[0]; const nav = document.getElementById('navigation'); if (pageName === "dogs") { nav.insertAdjacentHTML('afterbegin', '<a href="#">Dog Link 1</a><a href="#">Dog Link 2</a><a href="#">Dog Link 3</a>'); } else if (pageName === "cats") { nav.insertAdjacentHTML('afterbegin', '<a href="#">Cat Link 1</a><a href="#">Cat Link 2</a><a href="#">Cat Link 3</a>'); } else if (pageName === "js") { nav.insertAdjacentHTML('afterbegin', '<a href="#">JavaScript Link 1</a><a href="#">JavaScript Link 2</a><a href="#">JavaScript Link 3</a>'); } else { nav.insertAdjacentHTML('afterbegin', '<a href="#">Random Link 1</a><a href="#">Random Link 2</a><a href="#">Random Link 3</a>'); }

 body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: arial, sans-serif; } nav { display: flex; align-items: center; justify-content: flex-start; gap: 15px; padding: 10px 15px; background-color: #03a9f4; } nav > a { display: inline-block; padding: 5px 10px; border-radius: 100px; font-weight: bold; color: #fff; text-decoration: none;important: transition. all 0;15s ease-out: } nav > a:hover { background-color; #283593; }

 <nav id="navigation"></nav>

2. 面向对象的方法

在我看来，这是一个更好的方法。 JavaScript 的核心是作为一种面向对象的语言而构建的，当理解和利用这些面向对象的功能和属性时，它可以非常强大。 编程中还有一种方法称为“DRY”，它仅代表“不要重复自己”。 通过使用对象和 arrays 填充导航栏，我们的导航链接组织更加清晰。 通过这样做，您可以简单地循环浏览相应页面的导航链接数组，并且在循环中只触摸 HTML 一次。

我们可以像这样构建 object：

const navLinks = {
  dogs: [
    { label: "Dog Link 1", href: "#" },
    { label: "Dog Link 2", href: "#" },
    { label: "Dog Link 3", href: "#" }
  ],
  cats: [
    { label: "Cat Link 1", href: "#" },
    { label: "Cat Link 2", href: "#" },
    { label: "Cat Link 3", href: "#" }
  ],
  js: [
    { label: "JavaScript Link 1", href: "#" },
    { label: "JavaScript Link 2", href: "#" },
    { label: "JavaScript Link 3", href: "#" }
  ],
  default: [
    { label: "Random Link 1", href: "#" },
    { label: "Random Link 2", href: "#" },
    { label: "Random Link 3", href: "#" }
  ]
};

与 if/else 方法类似，此方法还提供了一种包含默认/备用 URL 列表的方法，以防您的用户遇到与您指定的任何路径都不匹配的页面。 为了实现这一点，我们首先使用从 URL 路径中收集到的变量pageName查询navLinks object，这需要括号object[variable]表示法，因为我们使用的是变量值或属性名称。 如果这不起作用，我们使用备用属性navLinks.default 。 我们可以像这样在一行中完成所有操作： (navLinks.pageName || navLinks.default) 。 这将返回指定属性（狗/猫/等）的链接数组。 一旦我们知道这一点，我们就可以立即在返回的数组上运行.forEach()数组原型方法，从而允许我们循环遍历数组包含的每个链接。 从这里我们只需将值注入我们希望它们像这样的位置： <a href="${link.href}">${link.label}</a> 。

现在让我们把它们放在一起。 正如您在下面的片段中看到的（单击“运行”），这会产生与第一种方法相同的最终结果。

 const pageName = window.location.pathname.slice(1).split("/")[0]; const nav = document.getElementById('navigation'); const navLinks = { dogs: [ { label: "Dog Link 1", href: "#" }, { label: "Dog Link 2", href: "#" }, { label: "Dog Link 3", href: "#" } ], cats: [ { label: "Cat Link 1", href: "#" }, { label: "Cat Link 2", href: "#" }, { label: "Cat Link 3", href: "#" } ], js: [ { label: "JavaScript Link 1", href: "#" }, { label: "JavaScript Link 2", href: "#" }, { label: "JavaScript Link 3", href: "#" } ], default: [ { label: "Random Link 1", href: "#" }, { label: "Random Link 2", href: "#" }, { label: "Random Link 3", href: "#" } ] }; (navLinks[pageName] || navLinks.default).forEach(link => nav.insertAdjacentHTML('afterbegin', `<a href="${link.href}">${link.label}</a>`));

 body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: arial, sans-serif; } nav { display: flex; align-items: center; justify-content: flex-start; gap: 15px; padding: 10px 15px; background-color: #03a9f4; } nav > a { display: inline-block; padding: 5px 10px; border-radius: 100px; font-weight: bold; color: #fff; text-decoration: none;important: transition. all 0;15s ease-out: } nav > a:hover { background-color; #283593; }

 <nav id="navigation"></nav>

我真诚地希望这会有所帮助，如果您需要在服务器端实现这一目标的帮助，请告诉我。 干杯!

Answer 3

您可以在 CSS 中制作导航栏并将其设置样式，只需更改锚标记的 href=""