Jquery 在导航滑动门中显示当前页面

发布于 2024-07-26 23:31:05 字数 683 浏览 6 评论 0原文

我目前正在构建 www.scenes-online.co.uk/test/

我已经得到了这段代码，使用 jquery 在悬停时在链接上上下滑动...

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

google.load("jquery", "1.3.2"); //load version 1.3.2 of jQuery

google.setOnLoadCallback(function() {
  jQuery(
        function($) {
$("a.button").hover(   function() {      $(this).animate({"marginTop": "-     4px"}, "800");   },   function() {      $(this).animate({"marginTop": "-     14px"}, "800");   });  

  });
});
</script>

我需要的是当前页面在margin-top 处的“向下”状态：-4px 但我所做的一切都是为了摆脱我的滑动门...

提前

感谢干杯

Stu

原文

I'm currently building www.scenes-online.co.uk/test/

I've got this code sliding up and down the links on hover using jquery...

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

google.load("jquery", "1.3.2"); //load version 1.3.2 of jQuery

google.setOnLoadCallback(function() {
  jQuery(
        function($) {
$("a.button").hover(   function() {      $(this).animate({"marginTop": "-     4px"}, "800");   },   function() {      $(this).animate({"marginTop": "-     14px"}, "800");   });  

  });
});
</script>

What i need is for the current page to have it's link in the 'down' state at margin-top:-4px but everything I'm trying is getting rid of my sliding doors...

thanks in advance

Cheers

Stu

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

写给空气的情书 2024-08-02 23:31:05

虽然它很棒，但您实际上并不需要 jQuery，因为每个页面都有一个单独的 HTML 文件。您可以为其相应页面设置每个特定按钮的样式，以便其初始状态为关闭。例如，您可以将“当前”类添加到index.html 上的主页按钮。当前将在 css 中声明 margin-top: -4px 。

如果您确实想这样做，则需要迭代页面加载时的按钮并检查该元素的 href 是否是当前位置。

 $('a.button').each( function(idx, el) {
    if (el.href === window.location.toString()) {
      $(el).css('marginTop','-4px');
    }
 });

但这很容易崩溃。例如，如果您使用查询字符串或哈希并且不更新 href。实际上，上面的示例在登陆页面上不起作用（因为 href 是“index.html”），但 window.location 只是“/”。但对其他人有效，所以它应该可以帮助你前进。

While it's awesome, you don't really need jQuery for this as you have a separate HTML file for each page. You could just style each specific button for its corresponding page so that its initial state is down. for example, you could add the 'current' class to the home button on index.html. And current would have margin-top: -4px declared in css.

If you really want to do this, you'll need to iterate over the buttons on page load and check that the href for that element is the current location.

 $('a.button').each( function(idx, el) {
    if (el.href === window.location.toString()) {
      $(el).css('marginTop','-4px');
    }
 });

This breaks down very easily though. For instance, if you use query strings or hashes and don't update the href. actually, the above sample doesn't work on the landing page for instance (as the href is "index.html") but window.location is only "/". But works on the others so it should get you going.

回复收藏 0 原文