0

使用 mootools.js 1.3.2 和 mootools-more.js

据我所知，这应该显示 div 并同时隐藏内容和 linkTab div。

$('blogLink').addEvent('click', function(){
 $('homeLink').removeClass('active'); 
 $('linkTab').removeClass('active'); 
 $('blogLink').addClass('active');  
 content.slideOut();
 linkTab.slideOut();
 blogLink.slideIn();
});

这是 HTML

<a href="#" id="blogLink">Blog</a>
<div id="blogContent">
content here
</div>

一切正常，没关系，但除此之外，我还希望能够为人们提供一个 URL，如http://mysite.com/#blogLink并打开该 blogContent div。当我现在这样做时，它会将我带到页面顶部，并且 blogContent div 被隐藏。

我该如何做到这一点？我确实尝试添加 mootools-smoothscroll.js 并使用此处概述的方法http://davidwalsh.name/smooth-scroll-mootools但这只是破坏了整个页面 - 无法正确加载。

我对 mootools 的经验为零，并且对 Javascript 的了解很弱，所以如果我需要一段时间来“了解”您要解释的内容，请原谅。

非常感谢。

4

1 回答 1

0

首先，您是否特别喜欢 MooTools？如果您是 JavaScript 新手，jQuery可能更易于使用，并且肯定拥有更大的支持社区。但我将发布一个现在应该在 MooTools 中工作的解决方案：

如果我对您的理解正确，您要实现的目标如下：

  • 您发布的匿名功能将在单击“博客”时运行
  • #blogLink如果有人访问URL 中的页面，该函数也会运行。

这并不难实现：

// Once the DOM has loaded - so that our elements are definitely available
window.addEvent('domready', function() {
    // Check for #blogLink hashtag, and reveal blog
    if(window.location.hash == 'blogLink') { revealBlog(); }

    // Make sure blog is revealed when link is clicked
    $('blogLink').addEvent('click', revealBlog);
});

function revealBlog() {
    $('homeLink').removeClass('active'); 
    $('linkTab').removeClass('active'); 
    $('blogLink').addClass('active');  
    content.slideOut();
    linkTab.slideOut();
    blogLink.slideIn();
}

您还可以将链接标记更改为：

<a href="#blogLink" id="blogLink">Blog</a>

确保他们在博客发布时始终位于正确的链接上。

于 2011-08-15T23:06:20.350 回答