导航如果在当前页面则保持高亮显示

Question

好吧，我的问题是下一个，我得到了一个带有 jQuery 动画 的导航，当将鼠标悬停在 << 时，会出现一个绿色滑块。 li > 标签。

当是当前页面时，突出显示状态是保持向下，但是当我 mouseOut 时它返回到顶部，这是自然行为。

我知道如何告诉 jQuery“如果”是 $current 幻灯片，不要 mouseOut

也许你可以查看代码

我得到了一个变量。

$current = 当前页面。

jQuery 代码：

 var navHover = function () {
  $("#S" + this.id).animate({top: '-40px'}, 300, 'swing')
  $("#A" + this.id).animate({paddingTop: '30px'}, 300, 'swing').animate({paddingTop: '45px'}, 300, 'swing')
  $("#I" + this.id).animate({top: '-10px'}, 300, 'swing').animate({top: '0px'}, 300, 'swing')
 }
 var navRelease = function () {
  $("#S" + this.id).animate({top: '-130px'}, 300, 'swing');
 }
 
 $('#navInside .topLevel').hover(navHover, navRelease);

编辑： 好的，我从 ircmaxell 获得了一些帮助，

我在标头中的 css 之后添加了此操作，以便我可以获得值当前页右。

<script type="text/javascript">
var currentPage = "<?php echo substr($current, 1) ?>";
</script>

然后将此代码更改为 if 语句。

 var navRelease = function () {
 if(this.id != currentPage){
 $("#S" + this.id).animate({top: '-130px'}, 300, 'swing');}
 };

Answer 1

您可以通过在 JS 中设置一个标志轻松地做到这一点，例如：

var currentPage = "nInicio"

然后在 navHover:

 var navHover = function () {
  if(this.id != currentPage){
   $("#S" + this.id).animate({top: '-40px'}, 300, 'swing')
   $("#A" + this.id).animate({paddingTop: '30px'}, 300, 'swing').animate({paddingTop: '45px'}, 300, 'swing')
   $("#I" + this.id).animate({top: '-10px'}, 300, 'swing').animate({top: '0px'}, 300, 'swing')
  }
 }
 var navRelease = function () {
 if(this.id != currentPage){
  $("#S" + this.id).animate({top: '-130px'}, 300, 'swing');
  }
 }

我的代码可能不正确（只是像真正快速那样输入 psudo）但是如果您选择的 id 与页面匹配，它应该禁用任何悬停/释放操作。这样它就保持“无动画”。

编辑

由于您在 PHP 方面遇到问题：

<script>
  var current = "<?php echo substr($current, 1) ?>";
</script>

编辑更多...

好吧，看来您

<script>
  var current = "<?php echo substr($current, 1) ?>";
</script>

在正确的位置添加时遇到了问题。我会将其放入您的主体中，只要您打开 时它位于主页上即可。我希望这有帮助，我开始觉得你在不知道任何 php 或 javascript 的情况下试图破解这个。

如果您喜欢这个答案，请标记为“答案”（绿色复选标记），谢谢。