Jquery 指示用户所在位置的导航菜单

我的页面上有一个菜单，其中有4个不同的区域供用户导航：

Home
About
Contact
Privacy

我想当用户点击其中一个链接时，我会在菜单中看到它的指示。所以，如果用户点击左右，他会看到

Home
-->About
Contact
Privacy

我使用ol和jquery来填充页面的另一部分，其中包含与单击主题相关的数据

我的html：

 <div class='home'><a href='#' class='navigate' id='home'><ol>Home</ol></a></div>
 <div class='about'><a href='#' class='navigate' id='about'><ol>About</ol></a></div>
 <div class='contact'><a href='#' class='navigate' id='contact'><ol>Contact</ol></a></div>
 <div class='privacy'><a href='#' class='navigate' id='privacy'><ol>Privacy</ol></a></div>

通过这次尝试，我能够在正确的ol中获得“->”，但是，我无法删除其他链接并丢失href链接。显然，当我弄明白这一点时，我将用一个很酷的小箭头图像替换-->

这是我的小提琴：

---

像这样的东西怎么样：

JS

$('.navigate').removeClass('active'); // Remove active from all elements in the menu
$(this).addClass('active'); // Add active class to the element being clicked

.active:before {
   content: "---> "; // Apply styling for the active element here
}

CSS

$('.navigate').removeClass('active'); // Remove active from all elements in the menu
$(this).addClass('active'); // Add active class to the element being clicked

.active:before {
   content: "---> "; // Apply styling for the active element here
}

---

在我看来，通过给它一个类来指示活动菜单元素要“干净”得多。通过这种方式，您可以简单地删除该类，而不必处理内部html。您还可以更好地控制您想要的样式。如果您想要的不是

-->

，您可以设计特殊颜色、项目符号或其他样式。看看其他网站是如何做到这一点的。

比如：

JS

$('.navigate').removeClass('active'); // Remove active from all elements in the menu
$(this).addClass('active'); // Add active class to the element being clicked

.active:before {
   content: "---> "; // Apply styling for the active element here
}

CSS

$('.navigate').removeClass('active'); // Remove active from all elements in the menu
$(this).addClass('active'); // Add active class to the element being clicked

.active:before {
   content: "---> "; // Apply styling for the active element here
}

---

在我看来，通过给它一个类来指示活动菜单元素要“干净”得多。通过这种方式，您可以简单地删除该类，而不必处理内部html。您还可以更好地控制您想要的样式。如果您想要的不是

-->

，您可以设计特殊颜色、项目符号或其他样式。看看其他网站是如何做到这一点的。

作为@OptimusCrime代码的替代方案，您只需执行以下操作：

// Match all navigate
$('.navigate').click(function () {
  // Delete all the arrows
  $("ol .current").remove();
  // Add the arrow only in the relevant one
  $(this).find("ol").prepend("<span class = 'current'>--></span>");
  });

//匹配所有导航
$（'.navigate'）。单击（函数（）{
//删除所有箭头
$（“ol.current”）.remove（）；
//仅在相关箭头中添加箭头
$（this.find（“ol”）.prepend（-->）；
});

。它更复古兼容，我发现它更容易

此外，我会将html更改为

<nav>
  <ul>
    <li>
      <a data-link = "home">
        Home
      </a>
    </li>
    <li>
      <a data-link = "about">
        About
      </a>
    </li>
  </ul>
</nav>

家


关于

因为它的语义和搜索引擎优化比你现在有更多的友好。那么jquery就更简单了：

// Match all navigate
$('nav a').click(function () {
  // Delete all the arrows
  $("nav .current").remove();
  // Add the arrow only in the relevant one
  $(this).prepend("<span class = 'current'>--></span>");
  });

//匹配所有导航
$（'nav a'）。单击（函数（）{
//删除所有箭头
$（“nav.current”）.remove（）；
//仅在相关箭头中添加箭头
$（this.prepend（“-->”）；
});

作为@OptimusCrime代码的替代方案，您只需执行以下操作：

// Match all navigate
$('.navigate').click(function () {
  // Delete all the arrows
  $("ol .current").remove();
  // Add the arrow only in the relevant one
  $(this).find("ol").prepend("<span class = 'current'>--></span>");
  });

//匹配所有导航
$（'.navigate'）。单击（函数（）{
//删除所有箭头
$（“ol.current”）.remove（）；
//仅在相关箭头中添加箭头
$（this.find（“ol”）.prepend（-->）；
});

。它更复古兼容，我发现它更容易

此外，我会将html更改为

<nav>
  <ul>
    <li>
      <a data-link = "home">
        Home
      </a>
    </li>
    <li>
      <a data-link = "about">
        About
      </a>
    </li>
  </ul>
</nav>

家


关于

因为它的语义和搜索引擎优化比你现在有更多的友好。那么jquery就更简单了：

// Match all navigate
$('nav a').click(function () {
  // Delete all the arrows
  $("nav .current").remove();
  // Add the arrow only in the relevant one
  $(this).prepend("<span class = 'current'>--></span>");
  });

//匹配所有导航
$（'nav a'）。单击（函数（）{
//删除所有箭头
$（“nav.current”）.remove（）；
//仅在相关箭头中添加箭头
$（this.prepend（“-->”）；
});

内容在列表项

之外的有序列表是无效的HTML。内容在列表项

之外的有序列表是无效的HTML。因此我的css是：content:url（pointer.png）；如何更改图像的大小？因此我的css是：content:url（pointer.png）；如何更改该图像的大小？